2. 程式人生 > >百度地圖行政區劃遮罩+描點+資訊窗demo

百度地圖行政區劃遮罩+描點+資訊窗demo

阿新 • • 發佈：2019-02-01
// 百度地圖API功能 var map = new BMap.Map("allmap"); // 建立Map例項 var boundary = ["石家莊市裕華區","石家莊市新華區","石家莊市橋西區","石家莊市長安區"]; var color = ["#FFD700","#FF83FA","#FF0000","#FF4500"]; var address = ["石家莊市鐵道大學","石家莊市物聯網大廈","石家莊科技中心","石家莊植物園","石家莊市裕華區南二環東路河北師範大學"]; map.centerAndZoom(new BMap.Point(114.527
, 38.071), 13); // 初始化地圖,設定中心點座標和地圖級別 //map.centerAndZoom("河北", 9); // 初始化地圖,第一個引數可以使用中心點座標,也可以使用城市名稱;第二個引數為地圖級別 //新增地圖型別控制元件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); //map.setCurrentCity("北京"); // 百度註釋(設定地圖顯示的城市 此項是必須設定的 ) 不設定也不影響地圖顯示,不知道具體作用
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 for (var i = 0; i < boundary.length; i++) { getBoundary(boundary[i],color[i]); //行政區劃覆蓋遮罩 } for (var j = 0; j < address.length; j++) { getPoint(address[j]); //地圖描點 } //點聚合 /* var markers = []; for (var i = 0; i < 10; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); markers.push(new BMap.Marker(pt)); } var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); */
//單擊獲取點選的經緯度 /* map.addEventListener("click",function(e){ alert(e.point.lng + "," + e.point.lat); }); */ function getBoundary(area,color){ var bdary = new BMap.Boundary(); bdary.get(area, function(rs){ //獲取行政區域 //map.clearOverlays(); //清除地圖覆蓋物 var count = rs.boundaries.length; //行政區域的點有多少個 if (count === 0) { alert('未能獲取當前輸入行政區域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColor: color ,fillOpacity:"0.3",strokeOpacity:0.3,strokeWeight: 2}); //建立多邊形覆蓋物 map.addOverlay(ply); //新增覆蓋物 pointArray = pointArray.concat(ply.getPath()); } //map.setViewport(pointArray); //調整視野 }); } // 將地址解析結果顯示在地圖上,並調整地圖視野 function getPoint(address) { // 建立地址解析器例項 var myGeo = new BMap.Geocoder(); myGeo.getPoint(address, function(point){ if (point) { //map.centerAndZoom(point, 16); var marker = new BMap.Marker(point); map.addOverlay(marker); //描點 var opts = { width : 280, // 資訊視窗寬度 height: 150, // 資訊視窗高度 title : "<span class='content'>詳細資訊</span>" , // 資訊視窗標題 } var infoWindow = new BMap.InfoWindow("<font class='content'>地址："+address+"<br/>座標:"+point.lng+"," +point.lat+ "<br/><a href='javascript:void(0)' onclick='alert(\"啦啦啦!!!\")' style='font-size:18px;color:blue;text-decoration:underline;'>點選有驚喜！！！</a></font>" ,opts); //建立資訊視窗物件 //滑鼠點選事件 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,point); //開啟資訊視窗 //map.centerAndZoom(point,14); }); //滑鼠移入事件 /* marker.addEventListener("mouseover", function(){ map.openInfoWindow(infoWindow,point); //開啟資訊視窗 }); */ }else{ alert("您選擇地址沒有解析到結果!"); } }, "石家莊市"); }

相關推薦

百度地圖行政區劃遮罩+描點+資訊窗demo

// 百度地圖API功能 var map = new BMap.Map("allmap"); // 建立Map例項 var boundary = ["石家莊市裕華區","石家莊市新華區","石家莊市橋西區","石家莊市長安區"]; var color = ["#FFD7

百度地圖手機端單觸點單擊和長按事件，解決部分手機(小米手機)地圖單擊事件失效，多觸點、拖動依然觸發長按的bug

|| ble apply timeout console dto eat 問題 int /** * Author 嶽曉 * * 對百度地圖的事件擴展，目前擴展了fastclick和longclick, * 解決某些設備click不執行的問題

python3 通過百度地圖API獲取城市POI點並存於CSV格式

原文資訊： 作者：WenWu_Both  出處：http://blog.csdn.net/wenwu_both/article/  版權：本文版權歸作者和CSDN部落格共有  轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連結；否則必究法律責

百度地圖js lite api 支援點聚合

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

【百度地圖】百度地圖指定省市進行描邊處理，省市外進行半透明遮蓋。

//指定省市進行描邊處理，省市外進行半透明遮蓋。 function getBoundary2(map,city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//獲取行政區域

百度地圖開發(四)定位以及點選按鈕返回當前定位

 效果圖:  定位就分為三部分: 1:配置定位SDK引數 2:監聽定位返回結果 3:開啟定位 程式碼: 返回當前定位的程式碼,在按鈕的點選事件裡面呼叫 //把定位點再次顯現出來 MapStatusUpdate mapStatusUpdate

下載百度地圖中的POI興趣點

一、什麼是POI興趣點 POI是“Point of Interest”的縮寫，中文可以翻譯為“興趣點”。在地理資訊系統中，一個POI可以是一棟房子、一個商鋪、一個郵筒、一個公交站等。 傳統的地理資訊採集方法需要地圖測繪人員採用精密的測繪儀器去獲取一個興趣點的經緯度，然後再標記下來。正因為PO

如何下載百度地圖中的POI興趣點

什麼是POI興趣點 POI是“Point of Interest”的縮寫，中文可以翻譯為“興趣點”。在地理資訊系統中，一個POI可以是一棟房子、一個商鋪、一個郵筒、一個公交站等。 傳統的地理資訊採集方法需要地圖測繪人員採用精密的測繪儀器去獲取一個興趣點的經緯度，然後再標記下來。正因為POI的

百度地圖，經緯度相同的點重複。導致頁面載入緩慢

問題：百度地圖，經緯度相同的點重複。導致頁面載入緩慢 緩慢原因：地圖上的每一個點其實都是一個html節點，載入節點太多，頁面就會卡 解決方法： 第一步：使用百度點聚合 http://lbsyun.baidu.com/jsdemo.htm#c1_4 第二步：使用點聚合後，放大

【百度地圖】製作多途經點的線路導航,模擬運動 (vue,typescript)

  網上有從起點到終點的模擬線路和運動，途經點的比較少。 結合網上demo，再進行了一下修改。 VUE （Typescript），先在index.html裡引用 <!DOCTYPE html> <html lang="en"> <head>

java 使用百度地圖顯示多個標註點帶彈出資訊框

直接上程式碼 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UT

使用Python從百度地圖上批量下載興趣點（POI）

背景 編寫這個工具完全是因為資料採集專案需要，由於POI野外採集十分繁瑣，需要定位並錄入名稱、地址等資訊，為了減輕外業人員的負擔，我想到百度地圖上有相關的POI介面可以呼叫，如果能從百度地圖上下載到這

android 百度地圖 marker設定忽明忽暗閃爍點

說下思路  百度地圖設定marker的時候可以這是icon和icons 思路就是設定幾個不同透明度的相同的圖片的bitmap作為icons 話不多說 直接上碼 1。這是核心程式碼 //閃爍點 bb

百度地圖新增覆蓋物層級在點聚合之上

頁面的地圖中加上了點聚合，後來提出需求要把推送過來的最新點處插上小旗子。普通的Marker會被聚合圖片覆蓋，自定義的覆蓋物也是跟普通Marker在一個容器。又試了富Marker，還是不行。這個問題困擾了我許久。用setTop和setZindex也是隻是在同一個容器中區分層級。 後來發現資訊視窗的

百度地圖上大資料量點的顯示（基於…

     百度地圖API中在新增超過2000個點時，以傳統的AddOverlay（）的方式新增覆蓋物（標記）會出現顯示不全，地圖縮放或者拖動時非常卡頓，甚至瀏覽器頁面崩潰。      好在百度提供了百度lbs雲的資料圖層功能，可以將海量使用者資料的在地圖展示。使用者可以建立並上傳自己的資料麻點圖,製作

百度地圖api之固定標記點跳動,點選顯示詳情

一.首先引入所申請的ak金鑰<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"><

關於百度地圖（四）：點聚合及只顯示螢幕範圍內的marker

繼續來總結百度地圖。 前面我們將marker傳入了地圖中去，但是，隨著專案的深入，需要在地圖上顯示的marker也越來越多，這個時候就必然會出現一個問題：卡頓！ 那麼百度地圖也為我們提供了“點聚合”來解決這個問題，不過我們還可以設定地圖只顯示螢幕範圍內的ma

百度地圖得到四角以及中心點的座標

1.今天寫東西需要用到百度地圖，因為後臺資料的點太多一下子載入速度很慢，有事也會彈出警告框，說多次請求百度api。 2.為此，我想能不能獲取四個點的座標，在把縮放級別調大一點，這樣載入是否就很快了那，於是我就這樣試了試 3.首先要得到四個角的座標程式碼如下 4.非同步載入

百度地圖API一：百度地圖上迴圈顯示標註點。使用閉包迴圈載入點選事件

本文記錄：百度地圖上迴圈顯示標註點marker。使用立即執行函式和閉包迴圈載入點選事件顯示資訊視窗顯示該標註點的更多資訊。 最近一個專案也要用到地圖功能，公司內部的專案，就去研究了一下百度地圖的API。 感覺跟天地圖的API還是有很多的相似之處。 基本的使用方式 是差不太

百度地圖更改預設定位中心點

//設定中心點座標 LatLng cenpt = new LatLng(30.259244461536102,120.2193754157201); //定義地圖狀態 MapStatus mMapStatus = new MapStatus.Builder() .targe