百度地圖簡單使用——添加折線，圓形等（html，js）

時間 2019-11-09

標籤百度地圖簡單使用添加折線圓形 html 欄目 HTML 简体版

原文原文鏈接

地圖覆蓋物概述

　　全部疊加或覆蓋到地圖的內容，咱們統稱爲地圖覆蓋物。如標註、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有本身的地理座標，當您拖動或縮放地圖時，它們會相應的移動。javascript

地圖API提供了以下幾種覆蓋物： css

Overlay：覆蓋物的抽象基類，全部的覆蓋物均繼承此類的方法。
Marker：標註表示地圖上的點，可自定義標註的圖標。
Label：表示地圖上的文本標註，您能夠自定義標註的文本內容。
Polyline：表示地圖上的折線。
Polygon：表示地圖上的多邊形。多邊形相似於閉合的折線，另外您也能夠爲其添加填充顏色。
Circle: 表示地圖上的圓。
InfoWindow：信息窗口也是一種特殊的覆蓋物，它能夠展現更爲豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。

　　可使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。 html

一。折線

　　Polyline表示地圖上的折線覆蓋物。它包含一組點，並將這些點鏈接起來造成折線。java

添加折線api

　　折線在地圖上繪製爲一系列直線段。能夠自定義這些線段的顏色、粗細和透明度。顏色能夠是十六進制數字形式（好比：#ff0000）或者是顏色關鍵字（好比：red）。瀏覽器

　　Polyline的繪製須要瀏覽器支持矢量繪製功能。在Internet Explorer中，地圖使用VML繪製折線；在其餘瀏覽器中使用SVG或者Canvasapp

如下代碼段會在兩點之間建立6像素寬的藍色折線： ide

var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920)    
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

二。自定義覆蓋物

API自1.1版本起支持用戶自定義覆蓋物。函數

要建立自定義覆蓋物，您須要作如下工做：ui

　　1.定義一個自定義覆蓋物的構造函數，經過構造函數參數能夠傳遞一些自由的變量。

　　2.設置自定義覆蓋物對象的prototype屬性爲Overlay的實例，以便繼承覆蓋物基類。

　　3.實現initialize方法，當調用map.addOverlay方法時，API會調用此方法。

　　4.實現draw方法。

定義構造函數並繼承Overlay

首先您須要定義自定義覆蓋物的構造函數，在下面的示例中咱們定義一個名爲SquareOverlay的構造函數，它包含中心點和邊長兩個參數，用來在地圖上建立一個方形覆蓋物。

// 定義自定義覆蓋物的構造函數  
function SquareOverlay(center, length, color){    
 this._center = center;    
 this._length = length;    
 this._color = color;    
}    
// 繼承API的BMap.Overlay    
SquareOverlay.prototype = new BMap.Overlay();

初始化自定義覆蓋物

　　當調用map.addOverlay方法添加自定義覆蓋物時，API會調用該對象的initialize方法用來初始化覆蓋物，在初始化過程當中須要建立覆蓋物所須要的DOM元素，並添加到地圖相應的容器中。

　　地圖提供了若干容器供覆蓋物展現，經過map.getPanes方法能夠獲得這些容器元素，它們包括：

floatPane
markerMouseTarget
floatShadow
labelPane
markerPane
mapPane

　　這些對象表明了不一樣的覆蓋物容器元素，它們之間存在着覆蓋關係，最上一層爲floatPane，用於顯示信息窗口內容，下面依次爲標註點擊區域層、信息窗口陰影層、文本標註層、標註層和矢量圖形層。

咱們自定義的方形覆蓋物能夠添加到任意圖層上，這裏咱們選擇添加到markerPane上，做爲其一個子結點。

// 實現初始化方法  
SquareOverlay.prototype.initialize = function(map){    
// 保存map對象實例   
 this._map = map;        
 // 建立div元素，做爲自定義覆蓋物的容器   
 var div = document.createElement("div");    
 div.style.position = "absolute";        
 // 能夠根據參數設置元素外觀   
 div.style.width = this._length + "px";    
 div.style.height = this._length + "px";    
 div.style.background = this._color;      
// 將div添加到覆蓋物容器中   
 map.getPanes().markerPane.appendChild(div);      
// 保存div實例   
 this._div = div;      
// 須要將div元素做爲方法的返回值，當調用該覆蓋物的show、   
// hide方法，或者對覆蓋物進行移除時，API都將操做此元素。   
 return div;    
}

繪製覆蓋物

　　到目前爲止，咱們僅僅把覆蓋物添加到了地圖上，可是並無將它放置在正確的位置上。您須要在draw方法中設置覆蓋物的位置，每當地圖狀態發生變化（比如：位置移動、級別變化）時，API都會調用覆蓋物的draw方法，用於從新計算覆蓋物的位置。經過map.pointToOverlayPixel方法能夠將地理座標轉換到覆蓋物的所須要的像素座標。

// 實現繪製方法   
SquareOverlay.prototype.draw = function(){    
// 根據地理座標轉換爲像素座標，並設置給容器    
 var position = this._map.pointToOverlayPixel(this._center);    
 this._div.style.left = position.x - this._length / 2 + "px";    
 this._div.style.top = position.y - this._length / 2 + "px";    
}

添加覆蓋物

　　您如今已經完成了一個完整的自定義覆蓋物的編寫，能夠添加到地圖上了。

// 初始化地圖  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定義覆蓋物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);

三。添加一個橢圓

<!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 {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
        #allmap{width:100%;height:500px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <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/CurveLine/1.5/src/CurveLine.min.js"></script>
    <title>添加橢圓</title>
</head>
<body>
    <div id="allmap"></div>
    <p>在地圖上添加一個橢圓，圓的顏色爲藍色、線寬6px、透明度爲1，填充顏色爲白色，透明度爲0.5</p>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 10);
    
    //centre:橢圓中心點,X:橫向經度,Y:縱向緯度
    function add_oval(centre,x,y)
    {
        var assemble=new Array();
        var angle;
        var dot;
        var tangent=x/y;
        for(i=0;i<36;i++)
        {
            angle = (2* Math.PI / 36) * i;
            dot = new BMap.Point(centre.lng+Math.sin(angle)*y*tangent, centre.lat+Math.cos(angle)*y);
            assemble.push(dot);
        }
        return assemble;
    }
    var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    map.addOverlay(oval);
</script>