百度地圖API圖標、文本、圖例與連線

時間 2020-04-20

標籤百度地圖 api 圖標文本圖例連線简体版

原文原文鏈接

百度地圖開放平臺功能強大，使用簡單，爲地圖的自定義提供了很是方便的途徑！javascript

本文以繪製一張全國機器輻射圖爲例記錄其基本使用方法，效果以下圖：php

圖中包括了帶圖標和文本的標註，連線以及圖例。html

1.關於座標

說到地圖，不得不說座標。java

我覺得，GPS獲取經緯度以後，把經緯度丟給地圖就能夠了。但那真的是自覺得。git

1.1 座標系

來看看實際狀況，如下是百度開發文檔裏的描述：github

目前國內主要有如下三種座標系：web

WGS84：爲一種大地座標系，也是目前普遍使用的GPS全球衛星定位系統使用的座標系。api

GCJ02：又稱火星座標系，是由中國國家測繪局制訂的地理信息系統的座標系統。由WGS84座標系經加密後的座標系。app

BD09：爲百度座標系，在GCJ02座標系基礎上再次加密。其中bd09ll表示百度經緯度座標，bd09mc表示百度墨卡托米制座標。ide

非中國地區地圖，服務座標統一使用WGS84座標。

百度對外接口的座標系爲BD09座標系，並非GPS採集的真實經緯度，在使用百度地圖JavaScript API服務前，需先將非百度座標經過座標轉換接口轉換成百度座標。

經過 GPS 獲取的爲 WGS84，在百度地圖上使用前要轉換爲 BD09，百度提供了相應的 api 進行座標轉換，文檔地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn

返回結果：
{
    status : 0,
    result :
    [
        {
            x : 114.23074871003,
            y : 29.579084787993
        } 
    ]
}

具體還可參考下這篇文章：http://www.javashuo.com/article/p-xmtahdtg-do.html

1.2 座標拾取器

若是座標是靜態的，或測試用，能夠直接經過百度地圖提供的「座標拾取器」工具來獲取經緯度。

工具地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

點哪就獲取哪的座標，此座標不用再轉換，複製過來便可以使用。

2. 開始應用

2.1 準備圖標

有好些站點能夠下載圖標，如：https://easyicon.net，能夠獲取一些圖標文件。至於商用的要求則要看看站點說明。

以下圖，這裏準備總部與機器的圖標下載保存爲 head.png、machine.png。

2.2 開啓百度地圖

地圖API的使用須要先申請一個 ak，爲了體驗方便，這裏已經申請了一個能夠直接使用的 key，在頁面中可直接加入如下引用。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn"></script>

使用如下語句，定義全局的地圖對象

// 百度地圖 API 功能對象
    var map = null;
    if (BMap) {
        map = new BMap.Map("allmap");  // id=allmap 的容器內顯示
        map.enableScrollWheelZoom();
    }

2.2 標註：圖標與文本

標註使用 BMap.Marker，能夠爲其指定 Icon與Label。爲了方便後續使用，本例定義如下函數，指定位置、圖標（本例中可用已經下載的圖標 head，machine）以及文本便可。

/**
    * 指定經緯度，圖標，標註文本
    * 在地圖上添加標註
    * longitude 經度
    * latitude  緯度
    * icon      圖標
    * text      標註文本
    **/
    function addMarker(longitude, latitude, icon, text) {
        if (!map) return;

        var point = new BMap.Point(longitude, latitude); 
        var myIcon = new BMap.Icon(icon + ".png", new BMap.Size(32, 32));
        // 指定位置及標註的圖標
        var marker = new BMap.Marker(point, { icon: myIcon });  // 建立標註
        if(text){
            var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
            marker.setLabel(label);
        }
        // 添加到地圖上
        map.addOverlay(marker);          
    }

2.3 連線

連線實際使用的是繪製多邊形的功能，只是當只指定了兩個點時，就是一根線。一樣，這裏定義一個函數以方便直接調用。

/**
    * 指定起止經緯度，繪製鏈接線
    * 
    * longitudeFrom 經度
    * latitudeFrom  緯度
    * longitudeTo   經度
    * latitudeTo    緯度
    **/
    function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
        if (!map) return;

        var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom); 
        var pointTo = new BMap.Point(longitudeTo, latitudeTo); 
        // 能夠指定多點鏈接，此處只考慮兩點
        var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
        // 添加到地圖上
        map.addOverlay(line);     
    }

2.4 圖例

圖例須要以地圖定義的控件方式來添加，在控件的 initialize 事件中完成 DOM 元素的生成便可，爲了體現過程自己，如下函數把 DOM 的html文本做爲參數，由外部靈活定義。

/**
    * 添加圖例
    * 實質就是在地圖上添加本身的頁面元素 
    *
    * html 網頁元素
    **/
    function addLegend(html){
        var LegendControl = function () {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        LegendControl.prototype = new BMap.Control();
        LegendControl.prototype.initialize = function (map) {
            var le = $(html)[0];
            map.getContainer().appendChild(le);
            return le;
        };

        var legendCtrl = new LegendControl();
        map.addControl(legendCtrl);
    }

2.5 綜合

有了以上函數，綜合起來就流程清晰了。如下座標，均經過座標拾取器獲取。

// 機器類：經度，緯度，名稱
    function Machine(longitude, latitude, name){
        this.longitude = longitude;
        this.latitude = latitude;
        this.name = name;
    } 

    // 肯定地圖的中心位置與縮放級別
    var center = new BMap.Point(110.423997,31.40979);             
    map.centerAndZoom(center, 6);  // 級別 6，跨省視圖

    // 添加圖例，自由寫 html
    addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>總部：<img src='head.png' style='width:16px; vertical-align:middle;' />&nbsp;&nbsp;設備：<img src='machine.png'  style='width:16px; vertical-align:middle;' /></div>");

    // 總部位置
    var head = { longitude : 112.918702343957, latitude : 28.30070516 };
    addMarker(head.longitude, head.latitude, 'head', '總部');

    // 全部機器位置
    var machineList = [
        new Machine(114.876143,38.113315,'石家莊'),
        new Machine(112.521289,37.822014,'太原'),
        new Machine(108.989008,34.328175,'西安'),
        new Machine(117.230997,31.881961,'合肥'),
        new Machine(103.984944,30.553819,'成都'),
        new Machine(108.400295,22.862517,'南寧'),
        new Machine(113.257181,23.169067,'廣州'),
        new Machine(120.174565,30.298715,'杭州'),
        new Machine(102.881106,24.959705,'昆明')
    ];

    // 添加全部機器並連線
    for(var i=0; i<machineList.length; i++){
        addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
        addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
    }