有一段页面渲染是用的jQuery，可以用vue的v-for;
在webpack.base.conf.js的module.exports的方法中粘贴下面externals对象，注意：它是跟entry平级
externals: {
"BMap": "BMap"
},以下是完整的vue组件，根据经纬度定位，可搜索地点，地图可放大缩小，可选择地图模式
<template>
<div class="myMap">
<div class="header" id="r-result">
<span @click="back() ">返回</span>
<input id="suggestId" type="text" placeholder="搜索地点" @keydown="search($event)"/>
</div>
<div class="map-wrap" style="position:relative" id="allmap"></div>
<div class="info bottom_info" id="fujin"></div>
</div>
</template>
<script> import BMap from 'BMap'; import base from '../../assets/js/base' export default { name: 'myMap', data() { return { lng: 120.21937542, lat: 12.25924446, map: '' } }, mounted() { this.ready(); }, methods: { /* back() { this.$emit("map_type", 0); },*/ ready: function () { //base.msg.loader();这个是加载前的一个loading，我自己写的一个组件，不用管它 let _this = this; let point2; //获取经纬度 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); _this.lng = r.point.lng; _this.lat = r.point.lat; base.msg.hide(); point2 = new BMap.Point(r.point.lng, r.point.lat); _this.getLocalName(point2); } else { alert('failed' + this.getStatus()); } }, {enableHighAccuracy: true}); //加载地图到allmap和添加地图插件 var map = new BMap.Map('allmap'); this.map = map; var point = new BMap.Point(_this.lng, _this.lat); map.centerAndZoom(point, 17); //这个数字是放大缩小地图用的 map.addControl(new BMap.MapTypeControl()); let ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); map.enableScrollWheelZoom(true); map.enableDoubleClickZoom(true); let marker = new BMap.Marker(point); map.addOverlay(marker); }, getLocalName: function (point2) { let gc = new BMap.Geocoder(); let that = this gc.getLocation(point2, function (rs) { let addComp = rs.addressComponents; that.map.enableScrollWheelZoom(); that.map.centerAndZoom(point2, 16); that.displayPOI(point2); }); }, displayPOI: function (mPoint) { let mOption = { poiRadius: 500, //半径为1000米内的POI,默认100米 numPois: 12 //列举出50个POI,默认10个 } let myGeo = new BMap.Geocoder(); //创建地址解析实例 let circle = new BMap.Circle(mPoint, 500); this.map.addOverlay(circle); //添加一个圆形覆盖物 circle.hide(); myGeo.getLocation(mPoint, function mCallback(rs) { sessionStorage.setItem('street', rs.addressComponents.street); let allPois = rs.surroundingPois; //console.log(allPois)//获取全部POI（该点半径为100米内有6个POI点） let s = [], html = ""; for (let i = 0; i < allPois.length; i++) { s.push(allPois[i].title + ", " + allPois[i].address); html += "<div class='item' data-val=" + allPois[i].address + " data-lng='" + allPois[i].point.lng + "' data-lat='" + allPois[i].point.lat + "'><p>" + allPois[i].title + "</p><p class='addr'>" + allPois[i].address + "</p></div>"; //map.addOverlay(new BMap.Marker(allPois[i].point)); } $(".bottom_info").html(html); }, mOption ); }, search: function (event) { var myValue; var that = this; console.log(event.which); if (event.which == 13) { document.activeElement.blur(); base.msg.loader(); var city = $("#suggestId").val(); var options = { onSearchComplete: function (results) { // 判断状态是否正确 if (local.getStatus() == BMAP_STATUS_SUCCESS) { var s = [], html = ''; for (var i = 0; i < results.getCurrentNumPois(); i++) { s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); html += "<div class='item' data-val=" + results.getPoi(i).address + " data-lng='" + results.getPoi(i).point.lng + "' data-lat='" + results.getPoi(i).point.lat + "'><p>" + results.getPoi(i).title + "</p><p class='addr'>" + results.getPoi(i).address + "</p></div>"; } myValue = results.getPoi(0).address + results.getPoi(0).title; var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 that.map.centerAndZoom(pp, 16); //setPlace(); $(".bottom_info").html(html); base.msg.hide(); } } }; var local = new BMap.LocalSearch(that.map, options); local.search(city); } } }, } </script>
<style lang="less"> @rem:35rem; .myMap { width: 100%; height: 100%; .header { width: 100%; height: 7.5%; display: inline-flex; align-items: center; span { display: inline-block; width:100/@rem; color: #44C9AA; height: 2rem; line-height: 2rem; font-size: 25/@rem; text-align: center; } #suggestId { width: 15.5rem; height: 2rem; line-height: 0.88rem; border-radius: .2rem; padding-left: 1.06666667rem; background: url("../../assets/images/send_07.png") #ffffff no-repeat 0.26666667rem 50%; background-size: 1rem 1rem; text-indent: .6rem; } } #allmap { width: 100%; height: 40%; } .info { max-height: calc(100% - 15.86rem); position: relative; bottom: 0; left: 0; width: 100%; overflow: scroll; .item { padding: 0.4rem 0.4rem; background: #ffffff; line-height: 0.6rem; border-bottom: 1px solid #E6E6E6; &:last-child { border-bottom: none; } p { display: block; margin-bottom: .5rem; margin-left: .2rem; &:last-child { color: #999; } } } } } </style>