vue引入百度地图api组件封装(根据地址定位)
Map.vue
<template>
<div class="Map" :style="{
height: this.height+'px',
width:this.width+ 'px'
}">
<div id="allmap"></div>
</div>
</template>
<script>
/* eslint-disable quotes,camelcase */
import {MP} from "./js/map"
// import {MP} from "./js/BMap"
// import {Change} from './js/changeJingwei'
export default {
name: 'Map',
data () {
return {
ak: 'oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi'
}
},
mounted() {
this.$nextTick(function () {
MP("oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi").then( BMap => {
var th = this
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
var myValue
myValue = this.province+ this.city+ '' + '' + this.name; //传入相应参数 省、市、区、街道、名称 (内容可以为空)
setPlace();
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(th.userlocation, 16);
map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
})
})
},
props: {
province: {
type: String
},
name: {
type: String
},
city: {
type:String
},
height: {
type: Number
},
width: {
type: Number
}
},
methods: {
sad(){
let map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);
map.enableScrollWheelZoom(true);
map.clearOverlays();
console.log(data.result.location.lng);
console.log(data.result.location.lat);
let new_point = new BMap.Point(data.result.location.lng, data.result.location.lat);
let marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
map.setCurrentCity(this.province); // 设置地图显示的城市 此项是必须设置的
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#allmap {
height: 100%;
width: 100%;
}
</style>
map.js
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
网友评论