2. 程式人生 > >用JavaScript在百度地圖上畫扇形，任意角度的扇形，自定義覆蓋物

用JavaScript在百度地圖上畫扇形，任意角度的扇形，自定義覆蓋物

阿新 • • 發佈：2019-01-13
var map = new BMap.Map("allmap"); var pointCenter = new BMap.Point(120.1965, 30.22975); map.centerAndZoom(pointCenter, 19); map.enableScrollWheelZoom(true); // 自定義扇形覆蓋物 function SectorLayer(center, radius, startAngle, endAngle, color, opacity) { this._center = center;// 點
this._radius = radius;// 半徑 this._color = color; // 顏色 this._startAngle = startAngle;// 起始角度 this._endAngle = endAngle; // 結束角度 this._opacity = opacity; // 透明度 } // 繼承百度地圖覆蓋物 SectorLayer.prototype = new BMap.Overlay(); // 初始化 SectorLayer.prototype.initialize = function
(map) { this._map = map; var canvas = document.createElement("canvas"); // 建立Cavans物件 canvas.setAttribute("width",String(this._radius*2));// 不能用canvas.style.width,會拉變形 canvas.setAttribute("height",String(this._radius*2)); canvas.style.zIndex = BMap.Overlay.getZIndex(this
._center.lat); canvas.style.position = "absolute"; canvas.style.background = "translate"; canvas.style.opacity = this._opacity; var ctx = canvas.getContext('2d'); ctx.lineWidth = 1; ctx.fillStyle = this._color; //填充色彩 ctx.strokeStyle = "red";//設定邊顏色 ctx.beginPath(); ctx.translate(this._radius, this._radius); ctx.moveTo(0, 0); ctx.arc(0, 0, this._radius, this._startAngle / 180 * Math.PI, this._endAngle / 180 * Math.PI); ctx.fill(); ctx.closePath(); map.getPanes().markerPane.appendChild(canvas); this._canvas = canvas; return canvas; } SectorLayer.prototype.draw = function () { var map = this._map; var pixel = map.pointToOverlayPixel(this._center); this._canvas.style.left = pixel.x - this._radius + "px"; this._canvas.style.top = pixel.y - this._radius + "px"; } // 隨便畫了7*（360/30）個扇形，地圖放到最大級別，不同半徑、不同角度下的效果 var colorsArray = ["red", "#8B008B", "green", " #FFFAAA", "FF66DD", "#CCDD33", "#FFAAAA", "orange", "#FF3300", "blue","#AAA321", "#63B8FF", "#8B6508"]; var step = 30;//每個扇形30度 for(var startAngle = 0; startAngle <= 360; startAngle +=step) { var chooseColor = Math.ceil(Math.random() * 10) % (colorsArray.length - 1); var sector = new SectorLayer(pointCenter, 250, startAngle, startAngle + step, colorsArray[chooseColor], 0.1); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 200, startAngle, startAngle + step, colorsArray[chooseColor], 0.2); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 160, startAngle, startAngle + step, colorsArray[chooseColor], 0.3); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 80, startAngle, startAngle + step, colorsArray[chooseColor], 0.7); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 40, startAngle, startAngle + step, colorsArray[chooseColor], 0.9); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 20, startAngle, startAngle + step, colorsArray[chooseColor], 1); map.addOverlay(sector); var sector = new SectorLayer(pointCenter, 10, startAngle, startAngle + step, colorsArray[chooseColor], 1); map.addOverlay(sector); }

相關推薦

用JavaScript在百度地圖上畫扇形，任意角度的扇形，自定義覆蓋物

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

百度地圖上循環加標註

bmap marker 標註 for (var i = 0; i < RegionData.length; i++) { (function () { var icon = new BMap.Icon(‘../../assets/images/arrow_right.

JavaScript--百度地圖定位，可拖拽

event 控件 int pla location view api 事件 ont <html> <head> <meta http-equiv="Content-Type" content="text/html; char

【百度地圖】在百度地圖上框出邊界線

程式碼： 一、建立地圖 建立地圖物件；設立中心點以及地圖級別。 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 12); 二、新增地圖事件

Python3在百度地圖上求兩點座標

假設兩個點座標：    數學公式： 具體程式碼，以及以瀋陽中街地鐵口到東中街地鐵口為例。 import math def getDistance(longitude1,latitude1,longitude2,latitude2): #維度 la

qt與js互動，並在百度地圖上繪製軌跡

前言： 獲得了照片的GPS資訊後，我們現在要做的就是把GPS資訊傳入JS中，然後通過百度地圖API將軌跡繪製出來。 一：在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine. 在qt5.6的額ui設計師介面中，並不能直

在百度地圖自由畫線---利用拆線-自定義可編輯路線

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

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

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

圖片拖動到百度地圖上

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport"

圖片拖動到百度地圖上2

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u

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

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

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

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

仿百度地圖上拉下滑抽屜盒

$(function() { var isdrag = false; var NowTop = 0, flag = true, h = $(".wrap").height(),

自定義百度地圖上顯示的覆蓋物

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <m

Android 百度地圖 動態畫多邊形，並判斷一個點是否在多邊形內部

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

百度地圖js 畫執行軌跡之執行軌跡標註文字（三）

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

從後臺獲取位置資訊並定位在百度地圖上

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=

利用百度API將自定義的點標註在百度地圖上

有時候我們需要將自定義的點的資訊標註在地圖上，正好最近用到了這個功能，網上學習百度API後，也已經實現，現在在這做一個總結。 1.實現過程 要使用百度API，我們首先需要得到一個金鑰（ak），這個可以免費申請，具體申請流程在這就不贅述了。 現在詳細介紹下實

HTML5網頁定位，並將位置繪在百度地圖上

執行效果： 實現程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5定位</tit

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

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