公共部分
?#allmap {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 500px;
? ? ? ? ?
? ? ? ? ? ? font-family: "微软雅黑";
? ? ? ? }
1、?
<div id="allmap">
<baidu-map ?:center="center" :zoom="zoom" @ready="handler"></baidu-map>
</div>
? data() {
? ? return {
?// 定位位置
?center: {lng: 0, lat: 0},
? ? // 地图放大等级
? ? ? zoom: 3
}
}
?methods: {
? ? ? // 实例对象
? ? ? handler ({BMap, map}) {
? ? ? console.log(BMap, map)
? ? ? // 经度
? ? ? this.center.lng = 116.404
? ? ? // 纬度
? ? ? this.center.lat = 39.915
? ? ? // 地图放大等级
? ? ? this.zoom = 15
? ? }
}
2、index.html引入
?<script src="http://api.map.baidu.com/api?v=3.0&ak=0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ"></script>
<!-- 以下可选scirpt?-->
<script type="text/javascript" src="https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js"></script>
? <script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js"></script>
? <script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script>
<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
?mounted () {
?var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
3、单页面引入
<div id="allmap"></div>
?data() {
? ? return {
? ? ? ak:'0MGoqTzESLptR6j6LEmhlDey6ZO53yeZ',
? ? ? script:{type:'',src:''}
}
}
?mounted () {
? ? this.$nextTick(function() {
? ? ? ? var _this = this;
? ? ? ? MP(_this.ak).then(BMap => {
? ? ? ? ? // 百度地图API功能
? ? ? ? ? var map = new BMap.Map("allmap")
? ? ? ? ? map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
? ? ? ? })
? ? ? })
}
import {MP} from '@/map.js' ?
export function MP(ak) { ?
? ? return new Promise(function (resolve, reject) { ?
? ? ? window.onload = function () { ?
? ? ? ? resolve(BMap) ?
? ? ? } ?
? ? ? var script = document.createElement("script"); ?
? ? ? script.type = "text/javascript"; ?
? ? ? script.src = "http://api.map.baidu.com/api?ak="+ak+"&callback=init"; ?
? ? ? script.onerror = reject; ?
? ? ? document.head.appendChild(script); ?
? ? }) ?
? } ?