百度地图初始化以及解析和逆解析

百度地图： API文档https://lbsyun.baidu.com/index.php?title=jspopularGL

百度地图支持海量点，解决上万数据打点不卡丝问题。但是vue-baidu-map不能自定义海量点样式

普通版

Index.html

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

组件中

<div id="map" class="map"></div>

初始化地图：

var map = new BMapGL.Map("map"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别


var geoc = new BMapGL.Geocoder();
map.addEventListener('click', function(e){ // 添加点击事件获取经纬度
    console.log ('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
    var latlng = e.latlng;
    geoc.getLocation(pt, function(res){ // 根据经纬度获取详细地址
        console.log (res.addressComponents)  
    })
})

//创建地址解析器实例
var geoc = new BMapGL.Geocoder();

// 将地址解析结果显示在地图上，并调整地图视野
geoc.getPoint('北京市海淀区上地10街', function(point){
    if(point){
        map.centerAndZoom(point, 16);
        map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
    }else{
        alert('您选择的地址没有解析到结果！');
    }
}, '北京市')

官网案例：

 

Vue-baidu-map组件版

Vue 中npm安装：npm i --save vue-baidu-map

文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

main.js

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'YOUR_APP_KEY'
})

页面使用：

<template>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
    </baidu-map>
</template>

<script>
export default {
    data () {
        return {
            center: {lng: 0, lat: 0},
            zoom: 3
        }
    },
    methods: {
        handler ({BMap, map}) {
            console.log(BMap, map)
            //进入页面自动定位，获取当前地理位置
            let geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition((r) => {
                _this.center = { lng: r.longitude, lat: r.latitude };
            }, { enableHighAccuracy: true })
            map.addEventListener("click",function(e){//根据点击点获取经纬度
                var geocoder = new BMap.Geocoder();
                var point = new BMap.Point(e.point.lng,e.point.lat);
                //根据经纬度获取详细地址信息
                geocoder.getLocation(point,function(geocoderResult,LocationOptions){
                    console.log(geocoderResult.addressComponents, '获取省市区详细地址信息')
                });
            });
        }
    }
}

</script>

<style>
.bm-view {
    width: 100%;
    height: 300px;
}
</style>