百度地圖API-創建多個坐標,連線,信息提示

  • 2020 年 3 月 14 日
  • 筆記

 

這是一個多坐標創建,並連線,和信息顯示的例子

 

<!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />      <style type="text/css">          body, html, #allmap {              width: 100%;              height: 100%;              overflow: hidden;              margin: 0;              font-family: "微軟雅黑";          }      </style>      <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>      <title></title>  </head>  <body>      <div>                <div style="min-height: 800px; width: 100%;" id="map">              </div>              <script type="text/javascript">                  var map; //Map實例                  //後台傳過來                  var currentLat = 116.345555;                  var currentLon = 40.018661;                  var my = { title: "我的位置" };                  var markerArr = [                      { title: "1", point: "116.364531,40.057003",name:"這是一個標題", content:"這是內容" },                      { title: "2", point: "116.340934,40.013401", name: "這是一個標題", content: "這是內容" },                      { title: "3", point: "116.342213,40.041267", name: "這是一個標題", content: "這是內容" },                      { title: "4", point: "116.342223,40.042267", name: "這是一個標題", content: "這是內容" },                      { title: "5", point: "116.342233,40.043267", name: "這是一個標題", content: "這是內容"},                    ];                    function map_init() {                      map = new BMap.Map("map");                      //第1步:設置地圖中心點,當前城市                      var point = new BMap.Point(currentLat, currentLon);                      //第2步:初始化地圖,設置中心點坐標和地圖級別。                      map.centerAndZoom(point, 14);                      //第3步:啟用滾輪放大縮小                      map.enableScrollWheelZoom(true);                      //第4步:向地圖中添加縮放控件                      var ctrlNav = new window.BMap.NavigationControl({                          anchor: BMAP_ANCHOR_TOP_LEFT,                          type: BMAP_NAVIGATION_CONTROL_LARGE                      });                      map.addControl(ctrlNav);                      //第5步:向地圖中添加縮略圖控件                      var ctrlOve = new window.BMap.OverviewMapControl({                          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,                          isOpen: 1                      });                      map.addControl(ctrlOve);                        //第6步:向地圖中添加比例尺控件                      var ctrlSca = new window.BMap.ScaleControl({                          anchor: BMAP_ANCHOR_BOTTOM_LEFT                      });                      map.addControl(ctrlSca);                          //第7步:繪製點                      for (var i = 0; i < markerArr.length; i++) {                          var p0 = markerArr[i].point.split(",")[0];                          var p1 = markerArr[i].point.split(",")[1];                          var maker = addMarker(new window.BMap.Point(p0, p1), i);                          addInfoWindow(maker, markerArr[i], markerArr[i].name, markerArr[i].content);                      }                      //繪製點                      var points = new Array();                      for (var i = 0; i < markerArr.length; i++) {                          var p0 = markerArr[i].point.split(",")[0];                          var p1 = markerArr[i].point.split(",")[1];                          var thePoint1 = new BMap.Point(p0, p1);                          points.push(thePoint1);                      }                      drawPolyline(map, points);                        // 添加信息窗口                      function addInfoWindow(marker, poi,name, content) {                          // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫                          var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });                          marker.setLabel(label);                          var clo = "";                          if ("我的位置" == poi.title) {                              clo = "#FF5782";                          } else {                              clo = "#E6FED";                          }                          label.setStyle({                              color: "#fff",                              fontSize: "16px",                              backgroundColor: "0.05",                              border: "0",                              fontWeight: "bold"                          });                          //maps.addOverlay(lab1);                            addClickHandler(name,content, marker);                      }                  }                  function addClickHandler(name,content, marker) {                      marker.addEventListener("click", function (e) {                          openInfo(name,content, e)                      }                      );                  }                  function openInfo(name,content, e) {                      var opts = {                          width: 250,     // 信息窗口寬度                          height: 80,     // 信息窗口高度                          title: name, // 信息窗口標題                          enableMessage: true//設置允許信息窗發送短息                      };                      var p = e.target;                      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);                      var infoWindow = new BMap.InfoWindow(content, opts);  // 創建信息窗口對象                      map.openInfoWindow(infoWindow, point); //開啟信息窗口                  }                  // 添加標註                  function addMarker(point, index) {                      index = 11;                      var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",                          new BMap.Size(23, 25), {                              offset: new BMap.Size(10, 25),                              imageOffset: new BMap.Size(0, 0 - index * 25)                            });                      var marker = new BMap.Marker(point, { icon: myIcon });                      map.addOverlay(marker);                      return marker;                  }                  //異步調用百度js                  function map_load() {                      map_init();                  }                    /**                   * 畫線                   */                  function drawPolyline(bMap, points) {                      if (points == null || points.length <= 1) {                          return;                      }                      bMap.addOverlay(new BMap.Polyline(points, {                          strokeColor: "blue",                          strokeWeight: 3,                          strokeOpacity: 0.6                      })); // 畫線                    }                    window.onload = map_load;              </script>      </div>  </body>  </html> 

效果如下: