First, the introduction of Baidu Map

  • Register baidu account in API development platform
  • Apply for AK (this is essential for using maps)
  • Introduced in vue project code (in the header of index.html)
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> // Map introduction <scripttype="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=key"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Copy the code

2. Create a map

1. Create map location in div tag (can set the corresponding size, position)

<div id="mapId" style="width:90%; height:700px; margin-left:5%; margin-top:4%">
Copy the code

2. Map initialization method

mapInit() {
    this.BMap = new BMap.Map("mapId"); Var point = new map.point (116.404, 39.915); / / to create this point coordinates. BMap. CenterAndZoom initialization (15) point, / / map, and set the center coordinates and map level enclosing BMap. EnableScrollWheelZoom (true) // Enable mouse rotation zoom}Copy the code

The mapInit() method successfully displays the map on the page

3. Add annotations to the map

1. Single label

  • The default icon
mapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId"); Var point = new map.point (116.404, 39.915); / / to create this point coordinates. BMap. CenterAndZoom initialization (15) point, / / map, and set the center coordinates and map level enclosing BMap. EnableScrollWheelZoom (trueVar marker = new bmap.marker (point); // Create a marker this.map.addoverlay (marker); // create a marker this.map.addoverlay (marker); this.BMap.centerAndZoom(point, 15) }Copy the code

  • Custom ICONS
mapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId"); Var point = new map.point (116.404, 39.915); / / to create this point coordinates. BMap. CenterAndZoom initialization (15) point, / / map, and set the center coordinates and map level enclosing BMap. EnableScrollWheelZoom (trueVar myIcon = new map.icon ("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap. Size (300157)); Var marker = new bmap. marker (point,{icon:myIcon}); // Create a marker this.map.addoverlay (marker); // create a marker this.map.addoverlay (marker); }Copy the code

2. Multiple annotation points

// Map initializationmapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId"); Var point = new map.point (116.404, 39.915); / / to create this point coordinates. BMap. CenterAndZoom initialization (15) point, / / map, and set the center coordinates and map level enclosing BMap. EnableScrollWheelZoom (trueVar bounds = this.map.getbounds (); var bounds = this.map.getbounds (); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat);for(var i = 0; i < 25; I ++) {var point = new map.point (sw.lng + lngSpan * (math.random () * 0.7), ne.lat-latspan * (math.random () * 0.7)); this.addMarker(point); }}, addMarker(point){var this = this var marker = new bmap.marker (point); // Add the marker to the map this.bmap.addoverlay (marker); }Copy the code

3. Click the Display information window

Var this = this var marker = new bmap.marker (point); Var opts = {width:250, height: 200, title:"Details"} var infoWindow = new map. infoWindow (' <h1> Beijing Tianan Men </h1> ', opts); // Click labeled click event marker. AddEventListener ("click".function(){// Display information box _this.map. openInfoWindow(infoWindow, point); console.log(ma) }); // Add the marker to the map this.bmap.addoverlay (marker); }Copy the code

The above is the most basic operation, which will be updated in the future