前書き: 同社は、vue2 プロジェクトに海南省の地図を埋め込み、地図上にいくつかの住所情報をマークし、省内の郡や地区を異なる色で表示したいと考えていますが、この要件は難しいものではありません。
公式ウェブサイト: https://lbs.amap.com/api/jsapi-v2/guide/abc/load
Amap の js ローダーを使用します
npm 経由でインストールします。
npm i @amap/amap-jsapi-loader --save
1. プロジェクトに新しい MapContainer.vue ファイルを作成し、マップコンポーネントとして使用します
2. コンポーネントに導入し、div を作成し、スタイルを設定するだけです
3. キーとセキュリティキーを準備します。アップグレード後に必要になります。
// MapContainer.vue
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
name: 'MapContainer',
data(){
return {
map: null,
polygon: [] // 这个就是只展示一个省，需要的数组
}
},
mounted(){
this.initAMap()
},
methods: {
initAMap(){
AMapLoader.loader({
key:'', //设置您的key
version:"2.0",
plugins:[], //用到的插件都放在这里面
Loca:{
version:"2.0"
}
}).then((AMap) => {
// 初始化
this.map = new AMap.Map("container",{
resizeEnable: true,
viewMode:"3D",
zoom: 8, // 初始放大级别
center: [105.602725,37.076636], // 地图展示的中心位置
scrollWheel: false, // 禁止拖拽
doubleClickZoom: false, // 禁止双击放大
dragEnable: false, // 禁止鼠标拖拽平移
});
// 后续添加的各种功能都是在这里面的
// 行政区颜色区分
var disProvince = new AMap.DistrictLayer.Province({
zIndex:12,
adcode:['460000'], // 这个code就是海南省的code
depth:2,
styles:{
'fill':function(properties){
var adcode = properties.adcode;
return _this.getColorByAdcode(adcode);
},
'province-stroke':'cornflowerblue',
'city-stroke': 'white',//中国地级市边界
'county-stroke': 'rgba(255,255,255,0.5)'//中国区县边界
}
})
disProvince.setMap(this.map);
// 圆点标记，因为是好多的地方需要标记，我就用了个for循环
for(let i = 0; i < this.capitals.length; i++) {
// 这个坐标好像只能是数字，但是我后端返回的是字符串又不在一块，所以我拼接一下
let center = [Number(this.capitals[i].gJd), Number(this.capitals[i].gWd)];
let circleMarker = new AMap.CircleMarker({
center:center,
radius:5, // 圆点半径
strokeColor:'white',
strokeWeight:2,
strokeOpacity:0.5,
fillColor:'red', // 颜色
fillOpacity: 1,
zIndex: 99, // 层级
bubble:true,
cursor:'pointer',
clickable: true
})
circleMarker.setMap(this.map)
}
})
}，
// 上面区块区分颜色的函数
getColorByAdcode (adcode) {
if (!colors[adcode]) {
var gb = Math.random() * 155 + 50;
colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
}
return colors[adcode];
};
}，
}
</script>
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 680px;
}
</style>
この画像は州の郡と地区です。ブロックは色に分けられています。公式 Web サイトのアドレス例: https://lbs.amap.com/demo/jsapi-v2/example/district/district-pro。
この画像はは公式サイトのドットマークですが、色とサイズを変更しただけです
Amap の左下隅にあるデフォルトのロゴと著作権を削除します。
找到你的index.html文件，添加样式，其他地方修改不管用
.amap-logo{
display: none !important;
}
.amap-copyright {
opacity:0 !important;
}
一つの県だけを表示したいので周りは表示しないので色で覆います これも初期化の下に追加しています この内側が問題点を指しており、外側に a が定義されています。
var dis = new AMap.DistrictSearch({
extensions: 'country',
subdistrict: 1
}).search('海南省', function(status, result) {
let 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),
]
let holes = result.districtList[0].boundaries
let pathArray = [
outer
];
pathArray.push.apply(pathArray, holes)
_this.polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: '#f5f5f5',//城市边界颜色
strokeWeight: 1,
fillColor: 'red', // 遮罩背景色黑色
fillOpacity: 1
})
_this.polygon.setPath(pathArray);
_this.map.add(_this.polygon);
})