Vue集成高德地图简单介绍

如果你不相信努力和时光,那么成果就会是第一个选择辜负你的。不要去否定你自己的过去,也不要用你的过去牵扯你现在的努力和对未来的展望。不是因为拥有希望你才去努力,而是去努力了,你才有可能看到希望的光芒。Vue集成高德地图简单介绍,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

高德地图官网:https://lbs.amap.com/

高德地图开始之前,我们要拿到一个key才可以。首先注册账号(https://console.amap.com/dev/index)然后进图应用管理 -> 我的应用 -> 创建新应用 -> 然后添加key 应该就可以了。

简单介绍

准备页面,添加div标签作为地图容器,同时为该div指定id属性;指定宽度和高度

 <div id="container" style="height:100vh;width: 100%"></div>

在vue项目工程中index.html文件中添加脚本标签

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

创建一个地图只需要一行代码,构造参数中的container为准备阶段添加的地图容器的id,创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性。

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

点标记 Marker,点标记适用于用户需要在地图上创建一个标记的场景。

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});

// 将创建的点标记添加到已有的地图实例:
map.add(marker);

信息窗体 InfoWindow默认信息窗体封装了关闭按钮,使用 API 默认的信息窗体样式,这个时候只需要对 InfoWindow 设定 content 属性即可,content 可以是 dom 对象,也可以是 html 识别的字符串。

var infoWindow = new AMap.InfoWindow({
        anchor: 'top-left',
        content: '这是信息窗体!',
});

infoWindow.open(map,[116.401337,39.907886]);

其它的可以参考官方文档

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/197059.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!