一、引入高德地圖和ui庫
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.DistrictSearch"></script>
AMap.DistrictSearch參數為了搜索某個區域
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
二、導入組件
vue.config.js中導入
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
}
}
三、頁面中引入組件
import AMap from 'AMap'
import AMapUI from 'AMapUI'
四、直接使用其api
var map = new AMap.Map('container', {
zoom: 6.3,
center: [108.95119, 35.678319],
pitch: 0,
viewMode: '3D',
// 設置地圖背景圖
mapStyle: 'amap://styles/ed9fff578638aa794e91839ea9c3b7d5'
})
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
// 啟動頁面
initPage(DistrictExplorer)
})
function initPage(DistrictExplorer) {
// 創建一個實例
var districtExplorer = new DistrictExplorer({
map: map // 關聯的地圖實例
})
var adcode = 610000 // 陝西區划編碼
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
console.error(error)
return
}
// 繪制載入的區划節點
renderAreaNode(districtExplorer, areaNode)
})
}
function renderAreaNode(districtExplorer, areaNode) {
// 清除已有的繪制內容
districtExplorer.clearFeaturePolygons()
// just some colors
var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']
// 繪制子級區划
districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
var fillColor = colors[i % colors.length]
var strokeColor = colors[colors.length - 1 - i % colors.length]
return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, // 線顏色
strokeOpacity: 1, // 線透明度
strokeWeight: 1, // 線寬
fillColor: fillColor, // 填充色
fillOpacity: 0.35 // 填充透明度
}
})
// 繪制父級區划，僅用黑色描邊
districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: '#01185b', // 線顏色
fillColor: null,
strokeWeight: 3 // 線寬
})
// 更新地圖視野以適合區划面
map.setFitView(districtExplorer.getAllFeaturePolygons())
}