vue使用高德地图
index.html引入标签
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script>
or
<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'安全秘钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch"></script>
vue.config.js(需自己创建,根目录下)
module.exports = { devServer: { port: 57103 // 端口号配置 }, configureWebpack: { externals: { 'AMap': 'AMap' // 高德地图配置 } } }
使用该功能的组件中引入:
<div id="container" style="width:500px; height:300px"></div>
init () { let map = new AMap.Map('container', { center: [116.397428, 39.90923], resizeEnable: true, zoom: 10 }) }
简单使用:
var map = new AMap.Map('container', { resizeEnable: true, zoom: 15, center: [112.600746,37.749593], zooms:[9,18], //设置地图的显示样式 mapStyle: 'amap://styles/darkblue', }); //选择区域内的地图,其他地区隐藏 var district = new AMap.DistrictSearch({ extensions: 'all', level: 'district' }) district.search('小店区', 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, strokeColor: '#00eeff',//边框线颜色 strokeWeight: 1, fillColor: '#13305B',//遮罩图层颜色 fillOpacity: 0.9 }); polygon.setPath(pathArray); map.add(polygon) }) //限制鼠标移动范围,[左下角坐标,右上角坐标] var myBounds=new AMap.Bounds([112.394977,37.592957],[112.698888,37.855561]); map.setLimitBounds(myBounds); var southWest = new AMap.LngLat(112.584777,37.742301) var northEast = new AMap.LngLat(112.602458,37.750988) var bounds = new AMap.Bounds(southWest, northEast) var southWest2 = new AMap.LngLat(112.602758,37.744981) var northEast2 = new AMap.LngLat(112.609539,37.750988) var bounds2 = new AMap.Bounds(southWest2, northEast2) var rectangle = new AMap.Rectangle({ bounds: bounds, strokeColor:'red', strokeWeight: 6, strokeOpacity:0.3, strokeDasharray: [30,10], // strokeStyle还支持 solid strokeStyle: 'dashed', fillColor:'blue', fillOpacity:0.5, cursor:'pointer', zIndex:50, }) var rectangle2 = new AMap.Rectangle({ bounds: bounds2, strokeColor:'orange', strokeWeight: 6, strokeOpacity:0.3, strokeDasharray: [30,10], // strokeStyle还支持 solid strokeStyle: 'dashed', fillColor:'yellow', fillOpacity:0.5, cursor:'pointer', zIndex:50, }) rectangle.setMap(map) rectangle2.setMap(map) var path = [ new AMap.LngLat(112.596879,37.751531), new AMap.LngLat(112.597007,37.758283), new AMap.LngLat(112.602844,37.760081), new AMap.LngLat(112.602629,37.757638), new AMap.LngLat(112.609238,37.757469), new AMap.LngLat(112.609238,37.751632), ]; var polygon = new AMap.Polygon({ path: path, strokeColor:'orange', strokeWeight: 6, strokeOpacity:0.3, strokeDasharray: [30,10], // strokeStyle还支持 solid strokeStyle: 'dashed', fillColor:'red', fillOpacity:0.5, cursor:'orange', zIndex:50, }); map.add(polygon); var marker = new AMap.Marker({ position: new AMap.LngLat(112.593317,37.746814), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] title: '模拟企业1' }); var marker2 = new AMap.Marker({ position: new AMap.LngLat(112.606282,37.747048), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] title: '模拟企业2' }); var marker3 = new AMap.Marker({ position: new AMap.LngLat(112.599845,37.754682), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] title: '模拟企业3' }); marker.on('click', function(e) { var infoWindow = new AMap.InfoWindow({ anchor: 'top-left', content: '<p>企业名称:<a href="http://192.168.14.4:8090/#/HomePage/Home">模拟企业一</a></p><br><p>联系方式:XXXXXX</p><br> <p click="dj">企业地址:山西省XXXXXX  </p>', }); infoWindow.open(map,[112.593317,37.746814]); }); marker2.on('click', function(e) { var infoWindow = new AMap.InfoWindow({ anchor: 'top-left', content: '<p>企业名称:<a href="http://192.168.14.4:8090/#/HomePage/Home">模拟企业二</a></p><br><p>联系方式:XXXXXX</p><br> <p click="dj">企业地址:山西省XXXXXX  </p>', }); infoWindow.open(map,[112.606282,37.747048]); }); marker3.on('click', function(e) { var infoWindow = new AMap.InfoWindow({ anchor: 'top-left', content: '<p>企业名称:<a href="http://192.168.14.4:8090/#/HomePage/Home">模拟企业三</a></p><br><p>联系方式:XXXXXX</p><br> <p click="dj">企业地址:山西省XXXXXX  </p>', }); infoWindow.open(map,[112.599845,37.754682]); }); map.add([marker,marker2,marker3]);