vue项目中高德地图根据城市名定位到城市中心位置,并在该位置做标记
先看效果:首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下:<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=这里放上你的密钥&plugin=AMap.DistrictSearch"></script>这是
·
先看效果:
首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=这里放上你的密钥&plugin=AMap.DistrictSearch"></script>
这是data:
data(){
return{
map:{},
markers:[],
tableData3:[
{cityName: "上海市"},
{cityName: "信阳市"},
{cityName: "郑州市"}
]
}
}
methods:
drawMap() {
const that = this
// 普通点
var normalMarker = new AMap.Marker({
offset: new AMap.Pixel(0, -40),
});
var icon = new AMap.Icon({
image: require('../../../../assets/images/map/red-circle.png'),//本地引入图标
size: new AMap.Size(34, 34),
imageSize: new AMap.Size(34, 34),
});
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'city' //查询行政级别为 市
};
var district = null
//加载行政区划插件
if(!district){
//实例化DistrictSearch
district = new AMap.DistrictSearch(opts);
}
let ccenter
//这里是把地图默认中心位置选在第一个城市的中心点,如果没这个需要可以删除这一段
district.search(that.tableData3[0].cityName, function(status, result) {
ccenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]
that.map = new AMap.Map('mapContainerbb', {
mark:{},
mapStyle: 'amap://styles/darkblue',
center: ccenter,
zooms: [4,8],//设置地图级别范围
zoom: 13
});
})
//行政区查询
let cityCenter = ''
that.tableData3.forEach((item,index)=>{
district.search(item.cityName, function(status, result) {
cityCenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]
that.markers[index] = new AMap.Marker({
icon: icon,
position: cityCenter,
offset: new AMap.Pixel(-12,-12),
zIndex: 101,
map: that.map,
anchor: 'top-right'
});
})
})
},
更多推荐
已为社区贡献3条内容
所有评论(0)