vue中使用百度地图(一)

百度地图api实例 地址链接：http://lbsyun.baidu.com/jsdemo.htm#a1_2

百度地图个性化地图编辑 地址链接：http://lbsyun.baidu.com/custom/

编辑好之后，点击查看json，将内容添加到相应的位置
需要申请秘钥
获取位置：使用坐标获取器
调用百度地图api去掉地图logo的方法：
在APP.vue中的style标签下添加

.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}

Vue框架中添加百度地图组件:https://blog.csdn.net/ting_163/article/details/78637602
具体的步骤：
1.需要在vue项目的index.html 中引入script:

externals: {
'BMap': 'BMap'
}, 

3.在地图组件中import BMap
// 导入BMap组件

import BMap from 'BMap'

4.实例

<template>
    
    <div id="XSDFXPage" class="XSDFXPage">div>
    template>
    <script>
    export default {
    name:'',
    data () {
    return {

    }
    },
    mounted() {
    // 百度地图API功能
    // 创建Map实例
    //let map = new BMap.Map('allmap',{minZoom:13,maxZoom:13});
    // minZoom:13,maxZoom:13分别为最大放大倍数和最小放大倍数
    //map.disableDragging(); //禁止拖拽
    var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(116.4035,39.915), 11);
    // 添加地图类型控件，其中数字分别代表经纬度和地图放大的倍数

    map.addControl(new BMap.MapTypeControl()); 
    // 设置地图显示的城市 此项是必须设置的
    map.setCurrentCity("杭州"); 
    // 开启鼠标滚轮缩放 
    map.enableScrollWheelZoom(true);
    // 设置定时器，对地图进行自动移动
    setTimeout(function(){
    map.panTo(new BMap.Point(113.262232,23.154345));
    }, 2000);
    setTimeout(function(){
    map.setZoom(14);
    },4000);
    /************************************************
    添加折线
    *************************************************/
    var pointGZ = new BMap.Point(113.262232,23.154345);
    var pointHK = new BMap.Point(110.35,20.02);
    setTimeout(function(){
    var polyline = new BMap.Polyline([pointGZ,pointHK], 
    {strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5});
    map.addOverlay(polyline);
    },6000);
    /************************************************
    添加工具条、比例尺控件
    *************************************************/
    map.addControl(new BMap.ScaleControl 
    ({anchor:BMAP_ANCHOR_TOP_LEFT}));
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.NavigationControl 
    ({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));
    /************************************************
    添加自定义控件类，放大ZoomControl
    *************************************************/
    function ZoomControl() {
    //默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
    this.defaultOffset = new BMap.Size(50,23);
    }
    //通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();
    //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返 
    回
    //在本方法中创建div容器，并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map) {
    //创建一个DOM元素
    var div = document.createElement('div');
    //添加文字说明
    div.appendChild(document.createTextNode('放大两级'));
    //添加样式
    div.style.color = '#40C5CC'; 
    div.style.cursor = 'pointer';
    div.style.border = '3px solid gray';
    div.style.backgroundColor = '#eee';
    //绑定事件，点击触发
    div.onclick = function(e) {
    map.setZoom(map.getZoom() + 2);
    }
    //添加DOM元素到地图上
    map.getContainer().appendChild(div);
    //将DOM元素返回
    return div;
    }
    //创建控件
    var myZoomCtrl = new ZoomControl();
    map.addControl(myZoomCtrl)

    /************************************************
    添加添加城市列表控件
    *************************************************/
    map.addControl(new BMap.CityListControl({
    anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
    offset:new BMap.Size(130,23)
    // 切换城市之间事件
    // onChangeBefore: function(){
    // alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    // alert('after');
    // }
    }));
    /************************************************
    添加新图标
    *************************************************/
    //定义新图标
    var myIcon = new BMap.Icon 
    ("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size 
    (300,157));
    //创建标注
    var marker = new BMap.Marker(pointHK,{icon:myIcon});
    var marker1 = new BMap.Marker(pointGZ,{icon:myIcon});
    //将标注放大地图上
    map.addOverlay(marker);
    map.addOverlay(marker1);
    //文字提示
    var label = new BMap.Label('广州西站',{offset:new BMap.Size 
    (140,10)});
    marker1.setLabel(label); 
    //添加新图标的监听事件
    marker1.addEventListener('click',function(){
    var p = marker1.getPosition();//获取位置
    alert("点击的位置是：" + p.lng + ',' + p.lat);
    })

    /************************************************
    添加曲线
    *************************************************/
    var beijingPosition=new BMap.Point(116.432045,39.910683),
    hangzhouPosition=new BMap.Point(120.129721,30.314429),
    taiwanPosition=new BMap.Point(121.491121,25.127053);
    var point = [beijingPosition,hangzhouPosition,taiwanPosition];

    var curve = new BMapLib.CurveLine(point, {strokeColor:"blue", 
    strokeWeight:3, strokeOpacity:0.5});//创建弧线
    map.addOverlay(curve);//添加到地图上
    curve.enableEditing();//开启编辑功能

    /************************************************
    给地图添加右键菜单
    *************************************************/
    var menu = new BMap.ContextMenu();

    var txtMenuItem = [
    {
    text:'放大',
    callback:function(){map.zoomIn()}
    },
    {
    text:'缩小',
    callback:function(){map.zoomOut()}
    }
    ];
    for(var i=0; i < txtMenuItem.length; i++){
    menu.addItem(new BMap.MenuItem(txtMenuItem 
    [i].text,txtMenuItem[i].callback,100));
    }
    map.addContextMenu(menu);
    }
    }
    script>
    <style scoped>
    html,body,.XSDFXPage{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
    }
    style>