高德地图的引入与添加点标记

   先吐槽两句。最近比较忙，又要写PC还要写APP，真烦。。。。。。

公司项目主要是智慧工地这一块，所以项目中地图用的比较多，公司一直用的是高德地图，所以一直想写一些高德地图的东西。

高德地图使用：

 1. 首先，注册开发者账号，成为高德开放平台开发者(这里放上地址：https://lbs.amap.com/)

 2. 登陆之后，在进入「应用管理」 页面「创建新应用」

 3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

 4.拿到key值后，可以直接在vue的index.html引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

　5、然后在页面中放一个地图容器

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

6、注意一定要给div高度和宽度。

7、然后就可以简单创建一个地图了

var map = new AMap.Map(‘container‘);
   var map = new AMap.Map(‘container‘, {
        zoom:11,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:‘3D‘//使用3D视图
    });

最后说下我刚开始犯过的错，创建盒子的时候container地图容器必须已经存在，必须在vue的生命周期mounted调用，有的时候地图会放在弹框里面，可以使用

this.$nextTick()函数,等页面加载完毕再生成。

高德地图的引入与添加点标记

原文：https://www.cnblogs.com/xw3456/p/13861851.html