使用高德地图画区且标记不同背景色
1.引入cdn<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的apik&plugin=AMap.DistrictSearch"></script>2.页面使用 如果是单独的js的话 会简单很多 这里就是结合vue来使用 下面就以上海市...
·
1.引入cdn
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的apik&plugin=AMap.DistrictSearch"></script>
2.页面使用 如果是单独的js的话 会简单很多 这里就是结合vue来使用 下面就以上海市为例
<template>
<div>
<h3>地图测试</h3>
<div id="container" style="width:70%;margin:0 auto;height:700px;"></div>
</div>
</template>
<script>
export default {
data(){
return{
dataArr:[
{"unitArea": '上海市', "cp": [121.472644, 31.231706],countNumber: 0},
{"unitArea": '上海城区', "cp": [121.472644, 31.231706],countNumber: 0},
{"unitArea": '黄浦区', "cp": [121.490317, 31.222771],countNumber: 0},
{"unitArea": '徐汇区', "cp": [121.43752, 31.179973],countNumber: 0},
{"unitArea": '长宁区', "cp": [121.42219999999998, 31.218123],countNumber: 0},
{"unitArea": '静安区', "cp": [121.44822399999998, 31.229003],countNumber: 0},
{"unitArea": '普陀区', "cp": [121.39249899999999, 31.241701],countNumber: 0},
{"unitArea": '虹口区', "cp": [121.49183199999999, 31.26097],countNumber: 0},
{"unitArea": '杨浦区', "cp": [121.52279699999997, 31.270755],countNumber: 0},
{"unitArea": '宝山区', "cp": [121.489934, 31.398896],countNumber: 0},
{"unitArea": '闵行区', "cp": [121.37597199999999, 31.111658],countNumber: 0},
{"unitArea": '嘉定区', "cp": [121.25033300000001, 31.383524],countNumber: 0},
{"unitArea": '浦东新区', "cp": [121.56770599999999, 31.245944],countNumber: 0},
{"unitArea": '松江区', "cp": [121.223543, 31.03047],countNumber: 0},
{"unitArea": '金山区', "cp": [121.330736, 30.724697],countNumber: 0},
{"unitArea": '青浦区', "cp": [121.113021, 31.151209],countNumber: 0},
{"unitArea": '奉贤区', "cp": [121.45847200000003, 30.912345],countNumber: 0},
{"unitArea": '崇明区', "cp": [121.397516, 31.626946],countNumber: 0}
]
}
},
methods:{
init(){
var map = new AMap.Map('container',{
zoom:12,
center: [121.47, 31.23],
mapStyle: "amap://styles/2c032b096ee12b01075395284e6808ad"
});
this.randerMapFun(map,this.dataArr)
},
//渲染地图的方法
randerMapFun(map,dataArr){
map.clearMap();
// //创建地图,设定地图的中心点和级别 上海 center:[121.47,31.23],
//画区
var district = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
subdistrict: 1,
// 设置查询行政区级别为 区
level: 'city'
// district
})
district.search('021', function (status, result) {
})
for (var k = 0; k < dataArr.length; k++) {
district.search(dataArr[k].unitArea, function (status, result) {
var bounds = result.districtList[0].boundaries
var polygons = []
if (bounds) {
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
var rgb='rgb('+r+','+g+','+b+')';
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity:.8,
fillColor:rgb,
strokeColor: '#CC66CC'
})
polygons.push(polygon)
}
// 地图自适应
// map.setFitView()
}
})
this.addIcon(dataArr[k].cp[0], dataArr[k].cp[1], dataArr[k].unitArea, dataArr[k].countNumber,map)
}
//画上海
new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 0
}).search('021', function (status, result) {
// 外多边形坐标数组和内多边形坐标数组
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true),
];
var holes = result.districtList[0].boundaries
var pathArray = [
outer
];
pathArray.push.apply(pathArray, holes)
var polygon = new AMap.Polygon({
pathL: pathArray,
//线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeColor: 'red',
strokeWeight: 1,
//多边形填充颜色,使用16进制颜色代码赋值,如:#FFAA00
fillColor: 'rgba(256,256,256)',
//多边形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
fillOpacity: 1,
strokeDasharray: [10, 2, 10]
});
polygon.setPath(pathArray);
map.add(polygon);
});
},
addIcon(left, right, unitArea, countNumber,map) {
var viaMarker = new AMap.Marker({
position: new AMap.LngLat(left, right),
// 将一张图片的地址设置为 icon
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// icon: SYS_CTX + '/views/images/tpzzz.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-30, -20),
content: "<div class='info'><span>" + unitArea + "</span><span class='number'>" + countNumber + "</span></div>"
});
map.add([viaMarker]);
}
},
mounted(){
this.$nextTick(() => {
this.init()
});
}
}
</script>
<style lang="scss">
.info{
width: 140px;
height: 40px;
display: flex;
span{
width:50%;
text-align: center;
background: #ffffff;
line-height: 40px;
}
.number{
background:red
}
}
</style>
更多推荐
已为社区贡献28条内容
所有评论(0)