使⽤vue-amap实现地图经纬度显⽰、具体地址显⽰、卫星图、路⽹路况、在⿏
标按下的地⽅添。。。
⽂章⽬录
写在开头
我的上篇博客已经写了如何在vue的⼯程中嵌⼊vue-amap组件，从⽽在⽹页中添加个地图功能。想要了解这部分的可以去看⼀下，链接如下：。
⼀、本⽂⽬的
本⽂是上⼀篇博客的延续，本篇博客将实现地图经纬度显⽰、具体地址显⽰、卫星图、路⽹路况、在⿏标按下的地⽅添加标注点和添加多个标注点这⼏个功能。
⼆、版本信息
{
"name":"vueamap",
"version":"0.1.0",
"private":true,
"scripts":{
"serve":"vue-cli-service serve",
"build":"vue-cli-service build"
},
"dependencies":{
"core-js":"^3.6.5",
"sass":"^1.27.0",
"sass-loader":"^10.0.4",
"vue":"^2.6.11",
"vue-amap":"^0.5.10",
"vue-router":"^3.2.0",
"vuex":"^3.4.0"
},
"devDependencies":{
"@vue/cli-plugin-babel":"~4.5.0",
"@vue/cli-plugin-router":"~4.5.0",
"@vue/cli-plugin-vuex":"~4.5.0",
"@vue/cli-service":"~4.5.0",
"vue-template-compiler":"^2.6.11"
}
}
三、在App.vue中调⽤其他.vue⽂件
上⼀篇博客写的关于地图的代码是放在App.vue中的，这种⽅法对后续的模块化开发并不适⽤，故本⼩节将创建⼀个map.vue⽂件，并在App.vue中调⽤此⽂件，从⽽实现模块化开发。
添加组件可以参考下⾯的链接：www.jb51/article/156127.htm
1、创建map.vue⽂件存放地图程序
2、给⼦组件map.vue命名⼀个全局id
export default {
name: "mmap"
}
3、返回App.vue组件。先引⼊组件，之后再渲染界⾯。
import mmap from "./components/map"
export default {
name:'App',
components: {
mmap
}
}
</script>
4、此时就可以在App.vue⽂件中调⽤map.vue⽂件了。<mmap></mmap>
5、最终的代码
/components/map.vue**
<template>
<div class="amap-wrapper">
<el-amap
class="amap-box"
vid="amap-vue"
:zoom="zoom"
:center="center"
></el-amap>
</div>
</template>
<script>
export default {
name: "mmap",
data() {
return {
zoom: 11,
center: [112.5862, 37.8268],
};
},
};
</script>
<style>
.amap-wrapper {
width: 100%;
height: 800px;
float: right;
}
</style>
App.vue
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<mmap></mmap>
</div>
</template>
<script>
import mmap from "./components/map"
export default {
name:'App',
components: {
mmap
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#uter-link-exact-active {
color: #42b983;
}
</style>
四、点击地图显⽰经纬度和具体地址
参考链接：elemefe.github.io/vue-amap/#/zh-cn/examples/base/amap 1、添加Geocoder以使⽤坐标转换服务
main.js
window.VueAMap.initAMapApiLoader({
key:'YOUR_CODE',
plugin:[...'Geocoder']
});
2、修改map.vue中的代码以增加该功能
本博客代码在第六⼩节
代码中有⼀段控制台输出result ----- console.log(position_xy); 按F12之后看控制台的输出参数，如果显⽰的是INVALID_USER_KEY则检查main.js中的KEY是否是正确的，因为该提⽰是告诉你开发者发起请求时，传⼊的key不正确或者过期
五、添加卫星图和路⽹路况
参考链接：elemefe.github.io/vue-amap/#/zh-cn/base/amap
1、在map.vue的中添加组件amapManager和plugin。其中plugin是为了导⼊卫星图和路⽹，amapManager为地图管理对象
2、直接放代码
本博客代码在第六⼩节
六、在⿏标按下的地⽅添加标注点
参考链接elemefe.github.io/vue-amap/#/zh-cn/coverings/marker
设计⽬标：显⽰地图，在地图中按⼀下就可以在⿏标点击处添加标志点，在⿏标点击另外的地⽅时原先的标注点消失，即⼀直保持地图上只有⼀个标注点。
1、在第五节点击地图显⽰经纬度和具体地址已经获取了⿏标按下时该点的经纬度和具体地址，只是没有显⽰该点。
2、如果需要显⽰点需要将点的数据写⼊到markers⾥⾯，添加的的格式如下：
let marker = {
position: [lng, lat],
};
3、将该点使⽤javascript的push⽅法存⼊到markers中，代码如下：
self.markers.push(marker);
4、因为每次点击都需要将上⼀个的标注点删除，故在添加标注点之前需要判断makers数组的长度是否为0，不为0则减⼀，即删除前⼀个标注点。
//*****************在⿏标点击处添加标注点*******************//
if (self.markers.length);
self.markers.splice(self.markers.length - 1, 1);
5、放代码：
本博客代码在第六⼩节
七、在地图上显⽰多个标注点
设计⽬标：创建多个点坐标，并将这些点显⽰在地图上*
1、使⽤规定格式创建多个点坐标对象，代码如下：
data_position : [
// 只能使⽤position
{position: [121.59996, 31.197646]},
{position: [121.69996, 31.197646]},
{position: [121.79996, 31.197646]},
{position: [121.89996, 31.197646]},
{position: [121.99996, 31.197646]},
]
,
2、将数据全部存⼊到markers内，使⽤push只能将最后⼀个数据放⼊到markers中，故添加for循环将数据全部推⼊到markers中，代码如下：
for (let x of this.data_position)
{
this.markers.push(x);
}
console.log(this.markers);
3、添加按钮优化效果，并添加移除点按钮，先判断markers是否为空，不为空则每次按⼀个移除⼀个点，代码如下：
if (!this.markers.length) return;
this.markers.splice(this.markers.length - 1, 1);
4、全部代码如下：
map.vue
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
:events="events"
:amap-manager="amapManager"
:plugin="plugin"
class="amap-demo"
>
<!-- 遍历显⽰ -->
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:events="marker.events"
></el-amap-marker>
</el-amap>
<div class="toolbar">
position: [{{ lng }}, {{ lat }}] address: {{ address }}
<button type="button" name="button" v-on:click="addMarker">
add markers
</button>
<button type="button" name="button" v-on:click="removeMarker">
remove markers
</button>
</div>
</div>
</template>
<style>
.amap-page-container {
width: 100%;
height: 500px;
}
</style>
<script>
// NPM ⽅式
import { AMapManager } from "vue-amap";
import VueAMap from "vue-amap";
//import AMap from 'AMap'
let amapManager = new VueAMap.AMapManager();
export default {
name: "mmap",
data: function () {mmap格式怎么打开
let self = this;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。