实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点。
这里举一个定点医院的例子。
在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src/router/index.js
(1)在高德地图开发者注册一个账号,官网地址:https://lbs.amap.com/
(2)在index.html页面添加js api的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
(3)在Hospital_map.vue添加div标签作为地图容器,同时为该div指定id属性:
<div id="container"></div>
具体参考网址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
(4)获取位置坐标:https://lbs.amap.com/console/show/picker
如下,取得坐标后创建一个maker实例:
var marker = new AMap.Marker({
position: new AMap.LngLat(114.932499,25.855219), // 经纬度对象,也可以是经纬度构成的一维数组[114.932499,25.855219]
title: '赣南医学院第一附属医院'
});
// 将创建的点标记添加到已有的地图实例:
map.add(marker);
完整代码如下:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<