1. 程式人生 > >百度地圖js 畫執行軌跡之加黑色圖層(四)

百度地圖js 畫執行軌跡之加黑色圖層(四)

在百度地圖展示執行軌跡的時候,有時候想要加一個灰濛濛的圖層展示,像是以黑色主題為主,顯的高大上些,實現方式如下:

在js呼叫如下:

this.layoutMap(mapInit);
// mapInit.addEventListener("zoomend", function () {
//     that.layoutMap(mapInit);
// });

實現方式如下:
layoutMap:function (mapInit) {
        //新增地圖圖層上方黑色蒙版
        var b = mapInit.getBounds(); // 取得範圍
        var ne = b.getNorthEast(); // 東北點
        var sw = b.getSouthWest(); // 西南點
        var polygon = new BMap.Polygon([
            new BMap.Point(ne.lng,ne.lat),
            new BMap.Point(sw.lng,ne.lat),
            new BMap.Point(sw.lng,sw.lat),
            new BMap.Point(ne.lng,sw.lat)
        ], {strokeColor:"#000", fillColor:"#000",strokeWeight:1, strokeOpacity:0.3,fillOpacity: 0.3});  //建立多邊形
        mapInit.addOverlay(polygon);   //增加多邊形
    },



相關推薦

地圖js 執行軌跡黑色

在百度地圖展示執行軌跡的時候,有時候想要加一個灰濛濛的圖層展示,像是以黑色主題為主,顯的高大上些,實現方式如下: 在js呼叫如下: this.layoutMap(mapInit); // mapI

地圖js 執行軌跡執行軌跡標註文字

在執行軌跡中需要在起止點加上資訊提示,實現方法如下: //加資訊提示的文字方法 setInfoBox:function (tracksPart,marker) { // var point = new BMap.Point(tracksPart.

js仿地圖拖拽、縮放、新增功能原創

最近專案中完成的需求,仿百度地圖中的功能: 要求:1.底層圖可以拖拽、縮放。       2.拖拽一個圖示,在底層圖上對應位置新增一個標註點,該標註點位置要隨底層圖移動。    3.新增的標註點,可以拖動,刪除。 主要知識點和難點就是各個瀏覽器的點選、拖拽、縮放事件相容性,對js運動屬性、運動偏移位置的瞭解,

地圖 js 調用

rip click ddc set 文檔 tla 覆蓋物 ext labels 百度地圖key 的獲取   進入 http://lbsyun.baidu.com/i 登錄你的賬號    點擊進入控制臺,復制 ak 的值 <!doctype html

Angular引入地圖js

第一步:申請百度地圖金鑰,很簡單,去網上隨便找教程 第二步:在Angular專案中引入百度地圖API檔案,在index.html中引入   第三部,建立一個元件 html部分 <div id = "map" style="width:100%;height:

地圖js lite api 支援點聚合

百度地圖lite api 是專門為h5 繪製海量點設計的,但是偏偏忽略掉了點聚合的需求,所以需要自己動手,做一次二次改造。   我們知道點聚合需要引入開源庫: MarkerClusterer:  http://api.map.baidu.com/library/MarkerClus

小程式學習筆記:小程式地圖例子的執行

  微信的小程式結構升級很快,百度的小程式demo不能直接運行了。 首先下載小程式——百度地圖的例子。https://github.com/baidumapapi/wxapp-jsapi 1、設定微信公眾平臺——小程式——設定——開發設定。 修改伺服器域名,reques

地圖自由線---利用拆線-自定義可編輯路線

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

用JavaScript在地圖扇形,任意角度的扇形,自定義覆蓋物

var map = new BMap.Map("allmap"); var pointCenter = new BMap.Point(120.1965, 30.22975); map.centerAndZoom(pointCenter, 19); map.enableScro

Android地圖onMarkerClick方法執行多次

最近在使用百度地圖時,要實現返回當前位置附近的Marker,然後給Marker新增點選事件,點選Marker彈出PopupWindow,每次重新整理地圖顯示新的Marker,使用bdMap.clear()重新整理失敗,原來的Marker還留在地圖上,點選Mark

地圖js報錯Uncaught TypeError: b.ga(...).nb is not a function

事件:百度地圖非同步批量建立marker,單擊單個marker彈出對話方塊報錯。 報錯: VM1771:1 Uncaught TypeError: b.ga(...).nb is not a function at HTMLSpanElement.eval (eval at zZ (getscri

地圖canvas自定義軌跡

    //將地圖座標轉換成畫素             //基本引數開始     MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]     LLBAND = [75, 60, 45

Android 地圖 動態多邊形,並判斷一個點是否在多邊形內部

由於專案的需求,需要動態的在地圖上畫出多邊形,並且需要判斷一個點是否在多邊形的範圍內,根據官方的demo,結合網上的查的資料,做出的效果如下圖所示: 思路就是: 1.點選地圖增加marker; 2.拿到marker,根據marker來

地圖JS-API:點選獲取經緯度以及地址

1.引入JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰">

地圖js api 非同步呼叫方法

用到百度地圖 通過 經緯度查詢所在城市,記錄一下呼叫的方法。 下面例子中ak是百度的key,更換成自己的就可以了。 請求引數說明 output=json 表示返回資料格式 可以為 xml callback=getCity 表示回撥方法 呼叫完成後會自

地圖:定位,軌跡,白板,載入崩潰,定位到非洲

這兩天道長在弄百度地圖,開發中也遇到了一些問題,在這裡和大家分享一下(額,主要是記錄一下,省的下次又忘了) 一、準備 二、定位 1.百度地圖配置 新增許可權 <uses-permission android:name="a

地圖JS API獲取到所在位置名稱

//引入百度地圖 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=金鑰"></script> <script type="text/

地圖自定義座標標識覆蓋物,隨地縮放偏移解決辦法

百度地圖在新增自定義標註的時候可能會遇見座標標識,隨著地圖縮放位置產生偏移,我折騰了一個上午,記下這篇。  在此之前,請參考文章: http://www.cnblogs.com/jz1108/archive/2011/09/15/2152122.html  但是注意:

關於推送點選通知,跳轉的問題Android

      今天在跟同事測試百度推送,之前一直困擾我的一個問題得到了有效解決,挺高興的,所以記錄一下,同時告誡自己,遇到問題,解決解決再解決,一定能夠解決的!      切入正題,百度推送的demo跟我們的app有些不一樣

執行記憶體可見性Volatile

從這篇博文開始,我們開始分享一些多執行緒的內容,畢竟在工作中,使用多執行緒比較多。多總結一下,終歸沒有壞處。這個系列的文章不會特別長,爭取在3到5分鐘之間結束,主要以說明白內容,給出相應的解決方案,重點在於實踐。 如標題所示,這篇博文我們簡單的介紹一下記憶體可