vue高德地图标点
张清悠 人气:01、 在public下的index.html中引入地图
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" rel="external nofollow" /> <script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
2、引入组件设置宽高100%
<template> <div> <div id="container" style="width: 100%;height: 550px"></div> </div> </template>
3、数组形式数据固定(一)
<script> export default { data() { return { //要标记的所有点的经纬度 lnglats: [ [108.909074, 34.254225], [108.910766, 34.254348], [108.910495, 34.253531], [108.909502, 34.253571], ], } }, mounted() { this.carGPSIP() }, methods: { carGPSIP() { var map = new AMap.Map("container", {resizeEnable: true});//初始化地图 //信息窗口实例 var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); //遍历生成多个标记点 for (var i = 0, marker; i < this.lnglats.length; i++) { var marker = new AMap.Marker({ position: this.lnglats[i],//不同标记点的经纬度 map: map }); marker.content = '我是第' + (i + 1) + '个Marker'; marker.on('click', markerClick); marker.emit('click', {target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体 } function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); } }, } </script>
4、用ajax请求后端真是接口(二)
<template> <div id="container" style="width: 100%;height: 550px"></div> <!-- 设置宽和高 --> </template> <script> export default { data() { return { //要标记的所有点的经纬度 Coordinate:[] // Coordinate:[ // { // lng:"54.323243", // lat:"43.654322" // } // ] //后端返回的数据格式 } }, mounted() { this.carGPSIP() }, methods: { carGPSIP() { var map = new AMap.Map("container", {resizeEnable: true});//初始化地图 //信息窗口实例 var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); //遍历生成多个标记点 因后端返回是map格式因此需要判断code $ajax.positionType({}, ({ code, data }) => { if (code == 200) { console.log(data); this. Coordinate = data.deviceList; //拿到数据 let Coordinate = data.deviceList; //定义Coordinate for (var i = 0; i < this. Coordinate.length; i++) { var marker = new AMap.Marker({ position: new AMap.LngLat( Coordinate[i].lng, Coordinate[i].lat), //不同标记点的经纬度 map: map, }); marker.content = '我是第' + (i + 1) + '个Marker'; marker.on("click", markerClick); marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体 } function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); } }); function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); } }, } </script> <style> </style>
5、其他需求请看文档请看官方文档
综上就是简答使用高德地图分全部过程,具体需求请参照高德官方api
加载全部内容