vue2.0填坑——百度地图API

来源：互联网发布：网络的分层结构编辑：程序博客网时间：2024/06/06 12:48

如何在vue中引用百度地图api？

步骤一：申请百度地图密钥；

步骤二：在index.html中添加百度地图JavaScript API接口；

  <script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>

步骤三：在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；

 externals: {    "BMap": "BMap"  }

步骤四：在地图组件中import BMap，否则会出现"BMap undefined"；

import BMap from ‘BMap‘;

步骤五：创建地图对象，在mounted生命周期调用；

<template>    <!--地图容器-->    <div id="XSDFXPage" class="XSDFXPage"></div></template><script>    export default {        name:'',        data () {            return {            }        },        mounted() {            // 百度地图API功能            // 创建Map实例            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>

步骤六：将组件插入父组件中；

注：步骤五的配置项可以封装成一个vue组件方便以后在不同的组件中调用。

阅读全文

1 0