vue 做一个定点地图的页面（定位到你想要的地点）

最新推荐文章于 2024-05-10 18:32:16 发布

nehznehzuw

最新推荐文章于 2024-05-10 18:32:16 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/elskaa/article/details/108307974

版权

这篇博客介绍如何利用Vue和高德地图API创建一个定点地图页面，专注于医院定位功能。步骤包括在高德地图官网注册账号获取key，添加地图入口脚本，设置地图容器，获取坐标并创建marker实例。

摘要由CSDN通过智能技术生成

实例：如何用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">
  <

最低0.47元/天解锁文章

nehznehzuw

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue 做一个定点地图的页面（定位到你想要的地点）

实例：如何用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"
复制链接

扫一扫