功能：
- 随着地图移动红色标点跟着变化并在其范围内出现最近的10个停车场，并按距离排序。
- 点击蓝色标点会出现其对应的信息窗口
- 右下角定位功能(点击回到当前所在位置)
(因使用静态数据，所以蓝色标点不会刷新)
高德地图api地址:https://lbs.amap.com/api/javascript-api/reference/map
1.异步创建script标签
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=initAMap";
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
});
}
2.参照高德地图api按步骤写功能
<template>
<view class="map">
<view class="map" id="map"></view>
</view>
</template>
<script>
import AMap from "@/common/util/map.js";
export default {
data() {
return {
zoom: 14,//地图显示的缩放级别
zooms: [10, 20],//缩放范围
initLat: 29.10037, //初始维度
initLng: 119.705008, //初始经度
timerId:null,//定时器标识
markerIcon:{
icon:require("@/static/icon/coordinate.png"),//蓝色icon
referenceIcon:require("@/static/icon/red.png")//中心红色icon
}
}
},
methods: {
getData(){
this.pois= [
{
"name": "艾青路-路侧停车位",
"address": "艾青路与康济街交叉路口往西南约200米",
"location": "119.702004,29.103379",
},
{
"name": "停车场(东方明珠花园东南)",
"address": "大堰河街中国农业银行(金东支行)西北侧约190米",
"location": "119.699854,29.100868",
},
{
"name": "停车场(艾青路)",
"address": "多湖街道艾青路南50米",
"location": "119.698416,29.101204",
},
{
"name": "停车场(艾青路)",
"address": "康济街与艾青路交叉口西100米",
"location": "119.703331,29.104291",
},
{
"name": "光南路-路侧停车位",
"address": "光南路中国农业银行(金东支行)东侧约110米",
"location": "119.701776,29.099583",
},
{
"name": "停车场(东方明珠花园东南)",
"address": "光南路1260号附近",
"location": "119.700869,29.099301",
},
{
"name": "东方明珠花园停车场",
"address": "康济南街金华市外国语学校西北侧约240米",
"location": "119.704990,29.102207",
},
{
"name": "金华移动大楼地下停车场",
"address": [],
"location": "119.695362,29.100456",
},
{
"name": "停车场(金华市金东区农林局东)",
"address": "光南路1399号附近",
"location": "119.704738,29.100579",
},
{
"name": "金源财富大厦地下停车场",
"address": [],
"location": "119.694960,29.100560",
}
]
},
async initAMap() {
try {
this.resAmap = await AMap();
this.$nextTick(function() {
let map = new this.resAmap.Map('map', {
resizeEnable: true,//监控地图容器尺寸变化
center: [this.initLng, this.initLat],//地图中心点坐标值
zoom: this.zoom,
zooms: this.zooms
});
this.map = map;
//定位功能
this.resAmap.plugin('AMap.Geolocation', () => {
let geolocation = new this.resAmap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000,//超过10秒后停止定位，默认：无穷大
buttonPosition: 'RB',//按钮位置
showMarker:false,//关闭定位点标识
showCircle:false,//关闭定位点范围圈
});
this.map.addControl(geolocation);
});
this.setMarker();//设置蓝色标点
this.centerMarker()//中心红色标点
});
} catch (e) {
console.log(e)
}
},
setMarker(){
let that = this;
let image = this.markerIcon.icon;
//设置蓝色标点icon
let myIcon = new this.resAmap.Icon({
image: image,
imageSize: new this.resAmap.Size(20, 25)
});
let index = 0;
//信息窗口设置
let infoWindow = new this.resAmap.InfoWindow({offset: new this.resAmap.Pixel(0, -32)});
for (let item of this.pois) {
var markerContent =`<div style="margin-left:6px;color:white;font-size:10px">${index+1}</div>`;
let text = item.location.split(',');
//蓝色标点中心数字
let NumberMarker = new this.resAmap.Marker({
content: markerContent,
position: text,
});
//蓝色标点icon
let Marker = new this.resAmap.Marker({
icon: myIcon,
position: text,
});
this.map.add([Marker,NumberMarker]);
//设置信息弹窗样式与点击事件
Marker.content = `<div>${item.name}</div>`;
Marker.content += `<hr style="margin:5px 0;border:none;height:1px;background-color:#e5e5e5;">`;
Marker.content += `<div>地址:${item.address}</div>`;
Marker.on('click', markerClick);
Marker.emit('click', {target: Marker});
index++;
}
function markerClick(e) {
if(index >=10){
//添加配置好的信息并打开弹窗
infoWindow.setContent(e.target.content);
infoWindow.open(that.map, e.target.getPosition());
}
}
},
centerMarker(){
let that = this;
let image = this.markerIcon.referenceIcon;
let myIcon = new this.resAmap.Icon({
image: image,
imageSize: new this.resAmap.Size(25, 25)
});
this.map.on('mapmove', mapMove);
//当前位置的经纬度
let initLng =that.map.getCenter().lng;
let initLat =that.map.getCenter().lat;
let marker = new that.resAmap.Marker({
icon: myIcon,
position: [initLng, initLat],
});
that.map.add(marker);
//范围圈设置
let circle = new that.resAmap.Circle({
center: [initLng, initLat],
radius: 1100,//半径
strokeWeight: 0,//线条宽度
strokeOpacity: 0,//线条透明度
fillOpacity: 0.4,//透明度
strokeStyle: 'dashed',//线样式
fillColor: '#1791fc',//颜色
zIndex: 50,
});
circle.setMap(that.map)
//监听屏幕移动并随之变化
function mapMove(){
//添加定时任务,一秒之后变化
if(that.timerId){
clearInterval(that.timerId)
}
that.timerId=setTimeout( () => {
that.map.clearMap();
that.setMarker();
let initLng =that.map.getCenter().lng;
let initLat =that.map.getCenter().lat;
let marker = new that.resAmap.Marker({
icon: myIcon,
position: [initLng, initLat],
});
that.map.add(marker);
let circle = new that.resAmap.Circle({
center: [initLng, initLat],
radius: 1100,
strokeWeight: 0,
strokeOpacity: 0,
fillOpacity: 0.4,
strokeStyle: 'dashed',
fillColor: '#1791fc',
zIndex: 50,
});
circle.setMap(that.map)
}, 1000)
}
},
},
onLoad() {
this.getData();
this.initAMap();
},
}
</script>
<style scoped>
.map {
width: 100%;
height: 100vh;
}
</style>
![基于MATLAB BP神经网络的水果识别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)