百度地圖自定義標註、信息窗口、多種類聚合、主題（一篇嘔心瀝血的博客...）

時間  2019-11-09
標籤 百度 地圖 自定義 標註 信息 窗口 種類 聚合 主題 一篇 嘔心瀝血 博客 欄目 設計模式 简体版
原文   原文鏈接

1、序  javascript

　　最近作百度地圖的圖形化定製。略有心得，在此和你們分享一下，少走彎路。先看目錄，大體介紹一下都寫了些啥。我會從最基本的來，一點點往下寫，同志們能夠看目錄本身去找須要的部分。ps：注意，我用的是百度地圖 2.0 版本，例子也都是。css

　　這個完整代碼，我會上傳到 github 上，以爲有用記得給個 star 哈，下載html

 

2、目錄java

　　  一、百度地圖基本使用，以及主題的配置git

　　二、點標註，自定義點標註的樣式，動畫、文字標籤等github

　　三、信息窗口，徹底自定義點標註信息窗口，定製樣式功能json

　　四、圖形標註。定製圖形標註，也就是圖形覆蓋物api

　　五、聚合。聚合的定製，多種聚合同時出現的配置dom

 

3、百度地圖基本使用，以及主題的配置工具

　  這裏，爲了方便，所有用 html + js 來實現，首先是基本用法，引入百度地圖的源文件，注意，這裏我用的 2.0 的版本，祕鑰你們須要本身去申請。沒祕鑰確定用不了的，申請流程很簡單，請自行百度。關於 css、js 文件的引入，用到的我所有引入了，後面分開說各是作什麼的。

　　作好準備工做，就開始新建一個dom，初始化 地圖實例。而後 清除覆蓋物 設置顯示的中心點、設置 最大最小層級，設置默認顯示層級。具體的直接看代碼，都有註釋。

　　到此，就已經能夠看到地圖了。而後咱們換一些地圖的 主題 。主題有2種，一種默認的，默認的註釋裏面都有寫，也能夠去官網本身查。一種是咱們自定義的。自定義的方法： http://lbsyun.baidu.com/custom/  到這個連接去配置，配置完了複製配置信息，在咱們的地圖中使用。具體複製哪一塊，代碼裏面怎麼用這個配置，請看代碼，都有註釋。可是怎麼用這個百度的工具，本身搗鼓去吧，都是圖形化的東西，也不難。

　　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>百度地圖用法示例</title>
  <link rel="stylesheet" media="all" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">
  <style>
    #myMap {
      width: 700px;
      height: 400px;
      margin: 100px auto;
    }
    #myMap .grayInfo{
      background-color: white;
      width: 220px;
      border-radius: 5px 5px;
    }
    #myMap .grayInfo .title {
      padding: 0 10px;
      height: 35px;
      line-height: 35px;
      background-color: #444444;
      border-radius: 5px 5px 0px 0px;
      color: white;
    }
    #myMap .grayInfo .content {
      padding: 10px;
      min-height: 50px;
    }
  </style>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script type="text/javascript" src="./js/InfoBox_main.js"></script>
<script type="text/javascript" src="./js/constants.js"></script>
<body>
  <div id="myMap"></div>
</body>
<script type="text/javascript">
//一、 基本配置
  const BMap = window.BMap
//實例化，並設置最大最小縮放層級
  const map = new BMap.Map("myMap", {
    minZoom: 3,
    maxZoom: 20,
  });
//清楚覆蓋物
  map.clearOverlays();
//設置中心點、默認縮放層級
  map.centerAndZoom(new BMap.Point(120.08469, 30.301904), 13);
//能夠鼠標縮放
  map.enableScrollWheelZoom(true);


//二、 設置 默認主題 和 自定義主題
  // 默認主題 normal blueSky  light  dark  googlelite  grassgreen  midnight  pink  bluish  grayscale
  // 還有幾個默認主題，可是發現並很差使
  map.setMapStyle({
    style: 'bluish'
  });

  // 自定義主題， http://lbsyun.baidu.com/custom/  自定義，完事導出json配置
  map.setMapStyle({
  　　styleJson: THEME_CUS
  });
</script>
</html>

 

　　而後貼個圖，看看效果

　　

 

4、點標註，自定義點標註的樣式，動畫、文字標籤等

　　如今咱們來添加一下標註，首先你得有幾個經緯度座標點，能夠用這個  http://api.map.baidu.com/lbsapi/getpoint/   百度的座標拾取系統。蠻好用的 ps： 在這插一嘴，百度、騰訊、谷歌等等亂七八糟地圖，他們用的座標系不同，若是座標是別得地方來的，最好仔細看看，不一樣座標系須要轉換以後才能用，不然差距很大，此類插件也不少，這裏很少說，有須要的能夠評論處@我。

　　 廢話很少說，我這裏有個點數據，有幾個別的屬性，是爲了我寫例子方便的，沒必要在乎。準備工做完成後，首先咱們把座標實例化成點、有須要的在定製一下點的樣式大小，動畫、事件、文字標籤等等。具體的請看代碼。

 

 

const points = [
    { lng: 120.03469, lat: 30.303904, infoWindow: 'search', func: true},
    { lng: 120.088499, lat: 30.275182,infoWindow: 'default' },
    { lng: 120.089249, lat: 30.317759, infoWindow: 'InfoBox' },

    { lng: 120.161941, lat: 30.283073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.174941, lat: 30.275073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.186941, lat: 30.297073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.198941, lat: 30.299073, infoWindow: 'InfoBox', type: 1 },
  ]
  const markerClusterers = [[], []]
  points.forEach(item => {
    //實例化點
    const point = new BMap.Point(item.lng, item.lat)
//自定義點的樣式
    const icon = new BMap.Icon(
      './image/yellow.png',
      new BMap.Size(32, 32)
    );
//生成點標註
    const marker = new BMap.Marker(point, { icon: icon });
    //動畫
    marker.setAnimation(BMAP_ANIMATION_BOUNCE)
    //文字標籤
    const label = new BMap.Label(
      '我是文字描述',
      { offset: new BMap.Size( 20, 20 ) }
    )
    label.setStyle({
      color : "red",
        fontSize : "12px",
        height : "20px",
        lineHeight : "20px",
        fontFamily:"微軟雅黑"
    });
    marker.setLabel(label);

//綁定事件
    if (item.func) marker.addEventListener("click", function () {alert('你好')});
    markerClusterers[item.type || 0].push(marker)
//添加點標註即添加覆蓋物
    map.addOverlay(marker);
  })

 

　　貼圖，看一下效果

　　

 

5、信息窗口，徹底自定義點標註信息窗口，定製樣式功能

　　添加完標註，咱們添加標註點擊後的信息窗口。信息窗口我把他分爲 3 種：簡潔型，純白 + 字，寫起來最方便省事； 功能綜合型，帶導航、搜索等等各類功能的，功能多，可是樣式固定，應用場景很少；徹底自定義型，用 InfoBox 開發的，樣式徹底自定義，功能也徹底自定義，能夠根據本身的需求本身開發，棒棒噠！ 這3種具體用法看代碼，在這大體說一下，若是想用第二種，須要引入下面這個 js 文件和css文件

<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 
<link rel="stylesheet" media="all" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">

　　若是想要第三種，須要引入個人本地的這個js文件。這裏說明一下，百度地圖時開源的，支持各類能夠擴展的api，也支持各類改源碼。自定義信息窗口這個貌似沒有一個很官方的包，不過我用的這個也是百度官方示例用的，只不過沒有公網連接，
只能本身下下來引入了。
ps: 這個自定義窗口是有api的，網上有不少瞎寫的博客，去改源碼的樣式，致使代碼亂七八糟，還影響地圖其餘的樣式，害羣之馬，望君擦亮眼睛。

 

 

const points = [
    { lng: 120.03469, lat: 30.303904, infoWindow: 'search', func: true},
    { lng: 120.088499, lat: 30.275182,infoWindow: 'default' },
    { lng: 120.089249, lat: 30.317759, infoWindow: 'InfoBox' },

    { lng: 120.161941, lat: 30.283073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.174941, lat: 30.275073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.186941, lat: 30.297073, infoWindow: 'InfoBox', type: 1 },
    { lng: 120.198941, lat: 30.299073, infoWindow: 'InfoBox', type: 1 },
  ]
  const markerClusterers = [[], []]
  points.forEach(item => {
    //點
    const point = new BMap.Point(item.lng, item.lat)
    const icon = new BMap.Icon(
      './image/yellow.png',
      new BMap.Size(32, 32)
    );
    const marker = new BMap.Marker(point, { icon: icon });
    //動畫
    marker.setAnimation(BMAP_ANIMATION_BOUNCE)
    //文字標籤
    const label = new BMap.Label(
      '我是文字描述',
      { offset: new BMap.Size( 20, 20 ) }
    )
    label.setStyle({
      color : "red",
        fontSize : "12px",
        height : "20px",
        lineHeight : "20px",
        fontFamily:"微軟雅黑"
    });
    marker.setLabel(label);

    //信息窗口

//簡易的信息窗口
    if (item.infoWindow === 'default') {
      const infoWindow = new BMap.InfoWindow('簡易的信息窗口')
//綁定事件，顯示窗口
      marker.addEventListener("click", function(){
        this.map.openInfoWindow(infoWindow,point);
      });
    } else if (item.infoWindow === 'search') {
//使用默認的綜合功能類窗口
      const searchInfoWindow = new window.BMapLib.SearchInfoWindow(map, '綜合功能型信息窗口', {
        width: 200,
        height: 80,
        panel: "panel",
        enableAutoPan : true,
//這幾個是添加導航、全部等功能的，具體每一個啥意思，看官方文檔
          searchTypes:[
            BMAPLIB_TAB_SEARCH,
            BMAPLIB_TAB_TO_HERE,
            BMAPLIB_TAB_FROM_HERE
          ]
      });
      marker.addEventListener("click", function(){
        searchInfoWindow.open(point)
      });
    } else if (item.infoWindow === 'InfoBox') {
//徹底自定義的 樣式、功能的窗口。第二個參數自定義html、css，以及一些js的功能，根據須要本身去寫樣式和業務功能
      const customizedInfoWindow = new window.BMapLib.InfoBox(map, `<div class="grayInfo">
        <div class="title">徹底自定義型信息窗口</div>
        <div class="content">內容</div>
      </div>`);
      marker.addEventListener("click", function(){
        customizedInfoWindow.open(point)
      });
    }
    if (item.func) marker.addEventListener("click", function () {alert('你好')});
    markerClusterers[item.type || 0].push(marker)
    map.addOverlay(marker);
  })

 

　　貼圖看一下效果

　　

 

 

6、圖形標註。定製圖形標註，也就是圖形覆蓋物

　　如今添加圖形標註，這個比較簡單，根據官方文檔寫就是了。畫圖標註須要引入以下js包：

 

<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>

 

　　 不過這裏提供一個不錯的創意，就是地圖選點 和 畫電子圍欄，不作詳細說明，下邊會貼出效果，感興趣的能夠本身作一作，作不出來的能夠@我，評論處留言，有時間的話，我會整理一下。

 

const style = {
  strokeColor: "red",    // 邊線顏色
  strokeWeight: 2,       // 邊線寬度
  strokeOpacity: 1,      // 邊線透明度
  fillColor: "#f8e71c",  // 填充色顏色
  fillOpacity: 0.3       // 填充色透明度
}
  const graphPoints = [{lng: 120.126973, lat: 30.30897}, {lng: 120.2822, lat: 30.326927}, {lng: 120.209186, lat: 30.225126}]
  let polygonPoint = graphPoints.map(point => {
    return new BMap.Point(point.lng, point.lat)
  })
  let polygon = new BMap.Polygon(
    polygonPoint,
    {
      ...style
    }
  )
  polygon.addEventListener("click",function () {alert('你好啊')});
  polygon.enableEditing()  // 多邊形可編輯
  map.addOverlay(polygon);

 

　　貼圖，看看效果

　　

       而後貼一下咱們項目 用戶圖形化配置百度地圖，主要是畫電子圍欄的功能

　　

 

 

7、聚合。聚合的定製，多種聚合同時出現的配置

　　接下來是聚合，聚合的使用很簡單。不過這裏特別說明2點：

　　　　一、聚合點數過多，通常萬點左右，就會很是卡，這是源碼的問題，如今不知道還有沒有這個問題，反正我之前用的時候有。

　　　　　　解決方案： 直接修改源碼，立竿見影，沒後遺症。懶得寫了，你們能夠參考這位朋友的博客  http://www.cnblogs.com/lightnull/p/6184867.html 

　　　　 二、多種類聚合。白話一點就是，1萬個點，分 蘋果、香蕉、桃子、哈密瓜等若干個種類，你須要把每一個種類單獨聚合，並用不一樣的效果區分開。這就是所謂的多種類聚合，這個也是直接看代碼。ps：這裏只是簡單介紹使用，若是作功能最好再加一些解釋說明的覆蓋物，大體說一下每一個覆蓋物表明什麼，每一個顏色表明的點數範圍。

　　最後，提一下作聚合，須要引入以下2個js包：

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
//四、 設置 聚合 markerClusterers

//清除覆蓋物
  markerClusterers.forEach((item, index) => {
    if (window[`markerClusterer${index}`]) window[`markerClusterer${index}`].clearMarkers()
    // delete this.markerClusterer
    window[`markerClusterer${index}`] = null
  })
//2種聚合的實現
  const size = new BMap.Size( 48, 48 )
  window.markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
    markers: markerClusterers[1],
    styles: [{
      url: './image/wuxing1.png',
      size: size,
      textSize: 18,
      textColor: 'white',
    }, {
      url: './image/wuxing.png',
      size: size,
      textSize: 18,
      textColor: 'white',
    }, {
      url: './image/wuxing2.png',
      size: size,
      textSize: 18,
      textColor: 'white',
    }]
  })
  window.markerClusterer2 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0] })

 

　　貼圖，看一下效果

　　

 

 

 

小結

　　以上就是我總結的百度地圖一些經常使用又不是那麼好找的功能，博客比較零散，你們能夠去個人 github 下載源碼，好用記得給個star。

　　喜歡交流技術的朋友能夠給我留言。後序還會再補充一些百度地圖別的功能，這個看時間吧。。。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程