vue项目中引入百度地图

注册账号

网址：jspopularGL | 百度地图API SDK；

认证信息:个人认证和企业认证,根据自己的需要按照流程填写认证信息

创建ak

ak是个人秘钥

在 控制台 -> 应用管理 -> 我的应用 点击 创建应用 填写相关申请信息：

创建后

项目中使用

1.在index.html中引用

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=替换为自己的ak"></script>

把不要忘记替换自己的ak

2.根据官方文档引入项目

index.html使用步骤

demo

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
/*	map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  */
  var point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15); 
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

成果展示

其他api展示地址地图JS API示例 | 百度地图开放平台地图JS API示例中心，以示例的形式介绍百度地图JS API如何使用，为开发者提供丰富的应用参考。https://lbsyun.baidu.com/jsdemo.htm#eAddMarker

补充 vue-baidu-map中文文档地址：Vue Baidu Maphttps://dafrok.github.io/vue-baidu-map/#/zh/start/installation

vue项目中引入百度地图

猜你喜欢