vue2使用高德地图及高德地图UI

一、引入高德地图和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())

}