首页 > 其他 > 详细

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

时间:2020-10-23 09:46:19      阅读:239      评论:0      收藏:0      [点我收藏+]

   先吐槽两句。最近比较忙,又要写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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!