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&emsp;&emsp;</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&emsp;&emsp;</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&emsp;&emsp;</p>',
    });
    infoWindow.open(map,[112.599845,37.754682]);
  });
  
map.add([marker,marker2,marker3]);