百度地圖基本用法

時間 2019-11-17

標籤百度地圖基本用法简体版

原文原文鏈接

1、百度地圖的引入

在api開發平臺註冊百度帳號
申請ak（這是使用地圖必不可少的）
在vue項目代碼中引入(在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">
    // 地圖引入
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=key"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製代碼

2、建立地圖

1. 在div標籤中建立地圖所屬位置(可設置相應的大小，位置)

<div id="mapId" style="width:90%;height:700px;margin-left:5%;margin-top:4%">
複製代碼

2.地圖初始化方法

mapInit() {
    this.BMap = new BMap.Map("mapId");          // 建立地圖實例
    var point = new BMap.Point(116.404, 39.915);  // 建立點座標
    this.BMap.centerAndZoom(point, 15) //初始化地圖，設置中心點座標和地圖級別 
    this.BMap.enableScrollWheelZoom(true)  // 開啓鼠標輪播縮放
}
複製代碼

執行mapInit()方法則能夠在頁面上成功顯示地圖 javascript

3、地圖添加標註

1.單個標註

默認圖標

mapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId");          // 建立地圖實例
    var point = new BMap.Point(116.404, 39.915);  // 建立點座標
    this.BMap.centerAndZoom(point, 15) //初始化地圖，設置中心點座標和地圖級別 
    this.BMap.enableScrollWheelZoom(true)   //開啓鼠標滾輪縮放
    var marker = new BMap.Marker(point);        // 建立標註1個標註 
    this.BMap.addOverlay(marker);
    this.BMap.centerAndZoom(point, 15)
}
複製代碼

自定義圖標

mapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId");          // 建立地圖實例
    var point = new BMap.Point(116.404, 39.915);  // 建立點座標
    this.BMap.centerAndZoom(point, 15) //初始化地圖，設置中心點座標和地圖級別 
    this.BMap.enableScrollWheelZoom(true)   //開啓鼠標滾輪縮放
    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157)); // 自定義圖標
    var marker = new BMap.Marker(point,{icon:myIcon});        // 建立標註1個標註 
    this.BMap.addOverlay(marker);
}
複製代碼

2. 多個標註點

// 地圖初始化
mapInit() {
    let _this=this;
    this.BMap = new BMap.Map("mapId");          // 建立地圖實例
    var point = new BMap.Point(116.404, 39.915);  // 建立點座標
    this.BMap.centerAndZoom(point, 15) //初始化地圖，設置中心點座標和地圖級別 
    this.BMap.enableScrollWheelZoom(true)   //開啓鼠標滾輪縮放
    // 隨機標註10個標註
    var bounds = this.BMap.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 BMap.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);
    // 將標註添加到地圖 
    this.BMap.addOverlay(marker);
}
複製代碼

3.點擊顯示信息窗窗口

addMarker(point){  // 建立圖標對象
    var _this = this
    var marker = new BMap.Marker(point);
    // 添加標註信息框
    var opts = {
    width:250,
    height: 200,
    title: "詳細信息"
    }
    // 建立信息框窗口
    var infoWindow = new BMap.InfoWindow(`<h1>北京天安門</h1>`, opts); 
    // 點擊標註的點擊事件
    marker.addEventListener("click", function(){
    // 顯示信息框
    _this.BMap.openInfoWindow(infoWindow, point); 
    console.log(ma)   
    }); 
    // 將標註添加到地圖 
    this.BMap.addOverlay(marker);    
}    
複製代碼