index.html中加入script
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2GRZTukOKUxe25P86mqjHuR1mTahwueb" ></script>
New map.vue
<Template>
<div ID = "allmap"
class = "the Map" />
</ Template>
<Script>
/ * * eslint-disable /
Export default {
name: 'Mapbox',
Data () {
return {
}
},
Mounted: function () {
. nextTick the this $ (() => {
var new new BMap.Map Map = ( "allmap"); // initialize the map, binding = allmap ID
var BMap.Point new new Point = ( 121.48789949, 31.24916171); // initialize point, given a default x, y values
map.centerAndZoom (point, 10); // to point map into points, the center of the page displayed in display, zoom level = 10
map.enableScrollWheelZoom (); // open the mouse wheel scroll
// point to show a plurality of if, according to the rear end of the interface may be passed based
let data = [
{X: 116.297047, y: 39.979542 , name: ' John Doe'},
{X: 116.321768, Y: 39.88748, name: 'John Doe'},
{X: 116.494243, Y: 39.756539, name: "Wang Wu '}
]
data.forEach ((E, I) => {
// create a point, the x, y values passed to
the let pointNumber = new new BMap.Point (EX, EY)
// creating window objects
let infoWindow = new BMap.InfoWindow ( "World", {
width: 150, // window width information
height: 100, // window height information of
title: "Hello" + i // window title information
});
// the data is added to the map name
var = BMap.Label new new label (e.name, {
offset: new new BMap.Size (25,. 5)
});
markerFun (pointNumber, infoWindow, label)
})
function markerFun (Points, infowindows, label) {
the let = new new markers BMap.Marker (Points);
the Map.addOverlay (markers); // be added to the map labels
markers.setLabel ( label); // add data to a map name in the
click event // marked
markers.addEventListener ( "the click", function (event) {
map.openInfoWindow (infowindows, points); // parameters: window, according to point corresponding to the point clicked window
});
}
// get the current location
var Geolocation new new BMap.Geolocation = ();
geolocation.getCurrentPosition (function (R & lt) {
IF (this.getStatus () == BMAP_STATUS_SUCCESS) {
var new new BMap.Marker MK = (r.point);
Map .addOverlay (mk);
map.panTo(r.point);
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
} else {
// alert('failed' + this.getStatus());
}
});
})
},
methods: {
}
}
</script>
<style>
.Map {
height: calc(100vh - 126px);
width: 100%;
}
</style>