1200字范文 > 使用高德地图（点标记）完成vue2项目

使用高德地图（点标记）完成vue2项目

时间：2019-07-10 23:12:13

相关推荐

使用高德地图（点标记）完成vue2项目

前言

官网中的代码

项目中的代码

效果图

代码

配置

前言

由于项目中有要使用高德地图的需求，我就傲娇的说，我会使用百度地图，可以改为百度地图不，最终的结果就是要用高德地图，后端小哥哥还特别好的安慰我说，高德地图的用法跟百度地图的用法一样，多看些视频就会了。

这话一说，嗯，心放下一半了，但是当我在vue2项目中，真正的使用时，我发现，我啥也不会，(灬ꈍ ꈍ灬)

官网中的代码

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>默认点标记</title><link rel="stylesheet" href="/jsapi_demos/static/demo-center/css/demo-center.css"/><style>html, body, #container {height: 100%;width: 100%;}.amap-icon img,.amap-marker-content img{width: 25px;height: 34px;}.marker {position: absolute;top: -20px;right: -118px;color: #fff;padding: 4px 10px;box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);white-space: nowrap;font-size: 12px;font-family: "";background-color: #25A5F7;border-radius: 3px;}.input-card{width: 18rem;z-index: 170;}.input-card .btn{margin-right: .8rem;}.input-card .btn:last-child{margin-right: 0;}</style></head><body><div id="container"></div><div class="input-card"><label style="color:grey">点标记操作</label><div class="input-item"><input id="addMarker" type="button" class="btn" onclick="addMarker()" value="添加点标记"><input id="updateMarker" type="button" class="btn" onclick="updateIcon()" value="更新点标记图标"></div><div class="input-item"><input id="clearMarker" type="button" class="btn" onclick="clearMarker()" value="删除点标记"><input id="updateMarker" type="button" class="btn" onclick="updateContent()" value="更新点标记内容"></div></div>// 注意点：key是你在高德开放平台自己申请的key<script type="text/javascript" src="/maps?v=2.0&key= 你的key"></script><script type="text/javascript">var marker, map = new AMap.Map("container", {resizeEnable: true,center: [116.397428, 39.90923],zoom: 13});// 实例化点标记function addMarker() {marker = new AMap.Marker({icon: "./logo.png",position: [116.406315, 39.908775],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);}function updateIcon() {marker.setIcon('/logo.png')}function updateContent() {if (!marker) {return;}// 自定义点标记内容var markerContent = document.createElement("div");// 点标记中的图标var markerImg = document.createElement("img");markerImg.className = "markerlnglat";markerImg.src = "/logo.png";markerImg.setAttribute('width', '25px');markerImg.setAttribute('height', '34px');markerContent.appendChild(markerImg);// 点标记中的文本var markerSpan = document.createElement("span");markerSpan.className = 'marker';markerSpan.innerHTML = "Hi，我被更新啦！";markerContent.appendChild(markerSpan);marker.setContent(markerContent); //更新点标记内容marker.setPosition([116.391467, 39.927761]); //更新点标记位置}// 清除 markerfunction clearMarker() {if (marker) {marker.setMap(null);marker = null;}}</script></body></html>

前置配置工作

高德开放平台 | 高德地图API ()

个人账户每天搜索调用额度为100次而企业账户每天1000次

我们是后管系统选Web端（JS API）

提交成功后弹出提示框

点击

项目中的代码

效果图

代码

首先在 src的同级 public ---> index.html 中添加

<script src = '/maps?v=2.0&key=你的key' type="text/javascript" > </script>

其次就是在自己需要的 .vue文件中写

<template><div id="container" /></template><script>export default {mounted() {var map = new AMap.Map('container', {zoom: 11,center: [116.397428, 39.90923], // 中心点坐标viewMode: '3D'})// marker点坐标var marker = new AMap.Marker({position: new AMap.LngLat(116.39, 39.9), // 经纬度title: '北京',// 自定义图标以及大小// icon:new AMap.Icon({// size:new AMap.Size(50,50),// image:this.filteTreeData(item),// // image:require('../../assets/common/head.jpg') 可以引入自定义图标// imageSize: new AMap.Size(50,50)// })// 存数据extData: { id: 1234 }})map.add(marker)// 点击图标修改marker.on('click', function(e) {console.log(this) // 取数据:this.// 修改this.setIcon(new AMap.Marker({position: new AMap.LngLat(116.39, 39.9), // 经纬度title: '北京'// 自定义图标以及大小// icon:new AMap.Icon({// size:new AMap.Size(50,50),// image:this.filteTreeData(item),// // image:require('../../assets/common/head.jpg') 可以引入自定义图标// imageSize: new AMap.Size(50,50)}))})}}</script><style scoped lang='scss'>#container {width:800px; height: 500px; margin-left: 50%; transform: translate(-50%,0); }</style>