vue前端开发仿钉图系列（1）高德地图的使用详解

　　最近公司让参考钉图做图层模块相关的功能，很庆幸有机会细细研究地图相关的东西。因为手机端用的是高德地图，web端也使用高德地图。还是和往常一样，先贴上效果图。

 

　　步骤1、在高德开放平台注册信息，创建自己的应用，可获取到key值和安全密钥jscode

　　步骤2、在public文件中引入高德地图的样式文件

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
type="text/css">

<script type="text/javascript" src="//webapi.amap.com/demos/js/liteToolbar.js"></script>

步骤3、初始化地图插件，并在dom中进行设置

<div id="container"></div>

initAMap() {
window._AMapSecurityConfig = {
securityJsCode: 'c0e6cd1d50eb92424fd33f79b8bbfcb5',
}
AMapLoader.load({
key: '6d73f3a54cc4164488f82695705a073f', //设置您的key
version: "2.0",
plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MouseTool', 'AMap.CircleEditor',
'AMap.PolyEditor', 'AMap.RectangleEditor', 'AMap.Geocoder', 'AMap.Geolocation',
'AMap.DistrictSearch','AMap.CitySearch'
],
AMapUI: {
version: "1.1",
plugins: []
},
Loca: {
version: "2.0"
},
}).then((AMap) => {
let that = this
console.log('地图初始化')
//高德地图配置
that.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 5,
zooms: [2, 22],
//center: [116.602725, 37.076636],
resizeEnable: true,
});

 

 

 　　整理总结不易，如需全部代码，请联系我15098950589（微信同号）