vue+高德，百度地图

1，npm安装vue-amap

npm install vue-amap --save

2，main.js引入

javascript 复制代码

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: '',
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.Geocoder'],
});
html页面引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=****"></script>
<script src="//webapi.amap.com/maps?v=1.4.15&key=****&&plugin=AMap.MarkerClusterer,AMap.Autocomplete,AMap.MapType,AMap.PolyEditor,AMap.MouseTool,AMap.AdvancedInfoWindow,AMap.Scale,AMap.ToolBar,AMap.RangingTool,Geocoder"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.4.11"></script>

3，amap.js 定位

javascript 复制代码

export const location =  {
    initMap(id){
        let mapObj = new AMap.Map(id, {})
        let geolocation;
        mapObj.plugin(['AMap.Geolocation'], function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //  是否使用高精度定位，默认:true
                timeout: 10000, //  超过10秒后停止定位，默认：无穷大
                maximumAge: 0, // 定位结果缓存0毫秒，默认：0
                convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true, //  显示定位按钮，默认：true
                buttonPosition: 'LB',  // 定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,  //  定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: true  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            })
            mapObj.addControl(geolocation)
            geolocation.getCurrentPosition()
        })
        return geolocation;
    }
}

4，使用

javascript 复制代码

import { location } from "@/utils/amap";
两种方式
let geolocation = location.initMap("map-container"); //定位
    AMap.event.addListener(geolocation, "complete", (result) => {
      if (result) {
      //地址 console.log(result)
     }
});
----
AMap.plugin("AMap.Geolocation", function () {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,
      timeout: 10000,
    });
    // 获取位置信息
    geolocation.getCurrentPosition((status, result) => {
		if (result && result.position) {
	}
})

百度地图

javascript 复制代码

## 获取经纬度写法：

let ak = '****'
/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuMap() {
    return new Promise(function (resolve, reject) {
        try {
            // console.log("BMap is defined:", BMapGL === undefined || BMapGL);
            resolve(BMapGL);
        } catch (err) {
            window.init = function () {
                resolve(BMapGL);
            };
            let script = document.createElement("script");
            script.type = "text/javascript";
            script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
            script.onerror = reject;
            document.body.appendChild(script);
        }
    });
}
export { loadBaiDuMap };
//通过地址转换为经纬度，注意这里必须传入city，也就是市
function getPoint(city, address) {
    let result = loadBaiDuMap().then((BMapGL) => {
        return new Promise(function (resolve, reject) {
            //创建地址解析器实例
            let res = "没有查询到经纬度";

            if (!city) {
                res = "商户记录属于哪个城市未知";
                reject(res);
            }
            var myGeo = new BMapGL.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野
            myGeo.getPoint(
                address,
                function (point) {
                    if (point) {
                        console.log(point, "point");
                        resolve(point);
                    } else {
                        reject(res);
                    }
                },
                city
            );
        });
    });
    return result;
}

export { getPoint };
//定位，获取当前的地理位置
function getLocationInfo() {
    let result = loadBaiDuMap().then((BMapGL) => {
        return new Promise(function (resolve, reject) {
            // 创建地图实例
            let geolocation = new BMapGL.Geolocation(); // 创建百度地理位置实例，代替 navigator.geolocation
            geolocation.getCurrentPosition(function (e) {
                // console.log(e, "e");

                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                    let point = new BMapGL.Point(e.point.lng, e.point.lat);
                    // console.log(point, "point");
                    let gc = new BMapGL.Geocoder();
                    gc.getLocation(point, function (rs) {
                        resolve(rs);
                    });
                } else {
                    resolve(this.getStatus())
                    // reject(this.getStatus());
                }
            });
        });
    });
    return result;
}
export { getLocationInfo };
使用
import { getLocationInfo } from "@/util/amap";
getLocationInfo().then((rs) => {
})

页面使用

javascript 复制代码

1：组件式
[vue-baidu-map](https://dafrok.github.io/vue-baidu-map/#/zh/index)
vue-baidu-map
main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '******'
})
  <baidu-map
       :center="center"
       :zoom="zoom"
       :height="screenHeight3"
       :width="screenWidth3"
       :map-style="mapStyle"    //背景样式
       :scroll-wheel-zoom="true"
       class="bmView"
       @ready="handler">
       //多个marker
<div v-for="(v, k) in wgMarker" :key="k">
	<bm-marker :position="{ lng: v.centerx, lat: v.centery }" @click="showWgMarker(v)">
  	    <bm-label :content="v.name +'-'+ v.num" :label-style="{****}" :offset="{width: -12, height: 30}"/>
	</bm-marker>
</div>
  <bm-info-window :offset="{width: -8, height: -32}" :show="showFlag" :position="positionData" title="***" @close="infoWindowClose()"></bm-info-window>
	
    <bm-polygon
        v-for="(p,index) in lineList.line"
        :key="'p'+index"
        :path="p"
        :fill-opacity="0.1"
        :stroke-opacity="0"
        :stroke-weight="2"
        stroke-color="#057af3"
        @click="handleClick(p)"
      />  //线组成的网格， 数据格式  [{ lng:**,lat: ** },]

</baidu-map>
	 mapStyle: {
	     style: 'midnight'
	 },
  handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.center.lng = 116.72963233941316
      this.center.lat = 39.912480003316986
      this.zoom = 15
 }
 组件式marker和Infowindow组件式一起使用
 动态插入marker就用动态插入infoWindow
2：script 引用
html页面引入
动态marker
      const bPoint = new BMap.Point(point.lonbd, point.latbd) // 创建点  point//经纬度数组
      var myIcon = new BMap.Icon(this.mapIconRed, new BMap.Size(300, 157))  //mapIconRed，动态icon
      const marker = new BMap.Marker(bPoint, { icon: myIcon }) // 做标记
      // marker = new BMap.Marker(pointArray[i], {
      // icon: icon
      //  })
      this.map.addOverlay(marker) // 在地图上显示标注点
      this.markers.push(marker)
      const _this = this
      marker.addEventListener('click', function(e) {
        _this.map.centerAndZoom(new BMap.Point(point.lonbd, point.latbd), 15) //点击显示到中心
        _this.showInfo(point, bPoint)  //显示  info
      })
    })
   showInfo(point, bPoint) {
      var opts = {
        width: 300, // 信息窗口宽度
        height: 250 // 信息窗口高度
     }
     const arr = `<div></div>`
     var infoWindow = new BMap.InfoWindow(arr, opts) // 创建信息窗口对象
     this.map.openInfoWindow(infoWindow, bPoint) // 开启信息窗口
   }
 绘制线
   const BMap = this.BMap
   const list = this.lineList.line  //经纬度数据
   //数据格式[{ lng:**,lat: ** },]          [[*,*]]
   const arr = []
   list.forEach(a => {
     a.forEach(b => {
       arr.push(new BMap.Point(b.lng, b.lat))
       var myPolygon = new BMap.Polygon(arr, {
         // fillColor: "#428ffc",
         // fillOpacity: v.opacity,
         // trokeColor: "#fff"
         strokeColor: '#FF0000', // 线条颜色
         strokeWeight: 5, // 线条宽度
         strokeStyle: 'dashed', // 线条形式，虚线
         strokeOpacity: 0.5, // 线条的透明度
         fillColor: '#1791fc', // 覆盖物的颜色
         fillOpacity: 0.1 // 覆盖物的透明度
       })
       this.map.addOverlay(myPolygon) // 添加区域
     })
   })