其他分享
首页 > 其他分享> > vue2使用高德地图及高德地图UI

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()) }

标签:DistrictExplorer,地图,colors,areaNode,UI,AMap,districtExplorer,var,高德
来源: https://www.cnblogs.com/DY9412/p/15639025.html