heatmap.js 百度地圖
轉自 http://blog.csdn.net/guang_mang/article/details/71237961
做熱力圖使用heatmap.js模組然後就是來挑用百度地圖api是他展現在百度地圖上面一首先你要申請一個百度地圖api介面的金鑰
申請金鑰之後,先登入上自己的賬號然後建立應用
三就是來取一個應用名稱,服務,型別全都不用動,ip白名單校驗請設定為0.0.0.0/0,然後檢視應用,把訪問應用的AK碼填入下面的程式碼裡面
- var points裡面填入自己的經緯度
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!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" />
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己申請的碼"></script>
- <script type="text/javascript"
- <title>熱力圖功能示例</title>
- <style type="text/css">
- ul,li{list-style: none;margin:0;padding:0;float:left;}
- html{height:100%}
- body{height:100%;margin:0px;padding:0px;font-family:"微軟雅黑"
- #container{height:650px;width:100%;}
- #r-result{width:100%;}
- </style>
- </head>
- <body>
- <div id="container"></div>
- <div id="r-result">
- <input type="button" onclick="openHeatmap();" value="顯示熱力圖"/><input type="button" onclick="closeHeatmap();" value="關閉熱力圖"/>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var map = new BMap.Map("container"); // 建立地圖例項
- var point = new BMap.Point(116.418261, 39.921984);
- map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別
- map.enableScrollWheelZoom(); // 允許滾輪縮放
- var points =[
- {"lng":"116.123421","lat":"39.612715","count":"37643"},
- {"lng":"116.647674","lat":"39.900081","count":"17000"},
- {"lng":"116.706551","lat":"39.690368","count":"38000"},
- ];#這裡面新增房價的經緯度,我的太多了,所以只拿了三個
- if(!isSupportCanvas()){
- alert('熱力圖目前只支援有canvas支援的瀏覽器,您所使用的瀏覽器不能使用熱力圖功能~')
- }
- //詳細的引數,可以檢視heatmap.js的文件 https://github.com/pa7/heatmap.js/blob/master/README.md
- //引數說明如下:
- /* visible 熱力圖是否顯示,預設為true
- * opacity 熱力的透明度,1-100
- * radius 勢力圖的每個點的半徑大小
- * gradient {JSON} 熱力圖的漸變區間 . gradient如下所示
- * {
- .2:'rgb(0, 255, 255)',
- .5:'rgb(0, 110, 255)',
- .8:'rgb(100, 0, 255)'
- }
- 其中 key 表示插值的位置, 0~1.
- value 為顏色值.
- */
- heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
- map.addOverlay(heatmapOverlay);
- heatmapOverlay.setDataSet({data:points,max:100});
- closeHeatmap();
- //判斷瀏覽區是否支援canvas
- function isSupportCanvas(){
- var elem = document.createElement('canvas');
- return !!(elem.getContext && elem.getContext('2d'));
- }
- function setGradient(){
- /*格式如下所示:
- {
- 0:'rgb(102, 255, 0)',
- .5:'rgb(255, 170, 0)',
- 1:'rgb(255, 0, 0)'
- }*/
- var gradient = {};
- var colors = document.querySelectorAll("input[type='color']");
- colors = [].slice.call(colors,0);
- colors.forEach(function(ele){
- gradient[ele.getAttribute("data-key")] = ele.value;
- });
- heatmapOverlay.setOptions({"gradient":gradient});
- }
- function openHeatmap(){
- heatmapOverlay.show();
- }
- function closeHeatmap(){
- heatmapOverlay.hide();
- }
- </script>
- </body>
- </html>
做熱力圖使用heatmap.js模組然後就是來挑用百度地圖api是他展現在百度地圖上面
一首先你要申請一個百度地圖api介面的金鑰
申請金鑰之後,先登入上自己的賬號然後建立應用
三就是來取一個應用名稱,服務,型別全都不用動,ip白名單校驗請設定為0.0.0.0/0,然後檢視應用,把訪問應用的AK碼填入下面的程式碼裡面
- var points裡面填入自己的經緯度
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!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" />
- <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/Heatmap/2.0/src/Heatmap_min.js"></script>
- <title>熱力圖功能示例</title>
- <style type="text/css">
- ul,li{list-style: none;margin:0;padding:0;float:left;}
- html{height:100%}
- body{height:100%;margin:0px;padding:0px;font-family:"微軟雅黑";}
- #container{height:650px;width:100%;}
- #r-result{width:100%;}
- </style>
- </head>
- <body>
- <div id="container"></div>
- <div id="r-result">
- <input type="button" onclick="openHeatmap();" value="顯示熱力圖"/><input type="button" onclick="closeHeatmap();" value="關閉熱力圖"/>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var map = new BMap.Map("container"); // 建立地圖例項
- var point = new BMap.Point(116.418261, 39.921984);
- map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別
- map.enableScrollWheelZoom(); // 允許滾輪縮放
- var points =[
- {"lng":"116.123421","lat":"39.612715","count":"37643"},
- {"lng":"116.647674","lat":"39.900081","count":"17000"},
- {"lng":"116.706551","lat":"39.690368","count":"38000"},
- ];#這裡面新增房價的經緯度,我的太多了,所以只拿了三個
- if(!isSupportCanvas()){
- alert('熱力圖目前只支援有canvas支援的瀏覽器,您所使用的瀏覽器不能使用熱力圖功能~')
- }
- //詳細的引數,可以檢視heatmap.js的文件 https://github.com/pa7/heatmap.js/blob/master/README.md
- //引數說明如下:
- /* visible 熱力圖是否顯示,預設為true
-
相關推薦
heatmap.js 百度地圖
轉自 http://blog.csdn.net/guang_mang/article/details/71237961做熱力圖使用heatmap.js模組然後就是來挑用百度地圖api是他展現在百度地圖上面一首先你要申請一個百度地圖api介面的金鑰申請網址申請金鑰之後,先登入上
JS: 百度地圖與騰訊/高德地圖經緯度轉換
前言 在開發中使用了第三方的資料,由於經緯度使用的是第三方的陣列,他們使用的是百度的地圖座標。在專案中使用時,能用百度地圖去解析自然是最好的,但是呢,該專案是基於微信小程式的,百度地圖針對小程式提供的API功能不是很完善,難以實現想要的需求,所以採用騰訊官方的地圖。 開始
html js百度地圖展示(通用)
引入js檔案 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iBM9rbzTH2dMZW7MbYMYmFgb"></script>
JS百度地圖api使用方法
首先,引入百度地圖的指令碼:[javascript] view plain copy<script src="http://api.map.baidu.com/api?v=2.0&ak=A
js 百度地圖自定義彈出資訊視窗
圓形頭像,下方圖文效果 var sContent = {# '<a style="c
百度地圖api入門介紹(js篇)
顯示 .com cnblogs androi web 入門介紹 步驟 api 地圖api 最近因為用到了百度地圖的api,感覺還有點用記錄一下,一方面充實一下自己,第二也希望有用到的同學可以參考一下;因為之前用過android baidu api 所以再用web
js中實現高德地圖坐標經緯度轉百度地圖坐標
math.sqrt pan poi 結果 mat blog 筆記 百度 說明 1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3
百度地圖 js 調用
rip click ddc set 文檔 tla 覆蓋物 ext labels 百度地圖key 的獲取 進入 http://lbsyun.baidu.com/i 登錄你的賬號 點擊進入控制臺,復制 ak 的值 <!doctype html
js仿百度地圖拖拽、縮放、添加圖層功能(原創)
ets tle clas 火狐 相對 inner tlist posit css 最近項目中完成的需求,仿百度地圖中的功能: 要求:1.底層圖可以拖拽、縮放。 2.拖拽一個圖標,在底層圖上對應位置添加一個標註點,該標註點位置要隨底層圖移動。 3.添加的標註
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
php+js實現百度地圖多點標註的方法
本文例項講述了php+js實現百度地圖多點標註的方法。分享給大家供大家參考,具體如下: 1.php建立json資料 ? 1
js使用百度地圖僅顯示中國區域,實現大資料熱點圖
需求:領導需要在年會上展示我們的使用者ip實時資料,做一個網頁版的地圖,僅僅顯示中國區域。 技術分析:echart,hchart等網站都有地圖版的,百度地圖有熱點例項,經過對比,我選用了百度地圖,但是百度地圖無法只顯示中國區域,這個時候就需要我來動動手解決掉最後一關。 應評論的各位想要原始碼
js呼叫百度地圖介面繪製任意多邊形並獲取每個點的經緯度等
來自:https://blog.csdn.net/u013239236/article/details/52213977 侵刪 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
[JS]JSONP跨域訪問百度地圖雲端儲存API
最近在寫一個基於百度地圖API實現的某旅遊村落電子地圖,在訪問百度地圖雲端儲存平臺上的資料表時出現了跨域問題,一開始我使用ajax獲取script,程式碼如下: function showDataz(data) { console.log("收到資料");
webview中巢狀html實現精準定位(百度地圖、高德地圖、騰訊地圖、H5原生定位)js對比
最近在實現一個功能,就是在安卓手機和蘋果手機嵌入html程式碼,實現精準定位,我為此對比幾種定位的方法。我要的是精準定位,就是誤差在100米左右的功能,類似與外賣app那種定位精確度 1. 首先是原生h5定位 if(browser.versions.an
js仿百度地圖拖拽、縮放、新增圖層功能(原創)
最近專案中完成的需求,仿百度地圖中的功能: 要求:1.底層圖可以拖拽、縮放。 2.拖拽一個圖示,在底層圖上對應位置新增一個標註點,該標註點位置要隨底層圖移動。 3.新增的標註點,可以拖動,刪除。 主要知識點和難點就是各個瀏覽器的點選、拖拽、縮放事件相容性,對js運動屬性、運動偏移位置的瞭解,
qt與js互動,並在百度地圖上繪製軌跡
前言: 獲得了照片的GPS資訊後,我們現在要做的就是把GPS資訊傳入JS中,然後通過百度地圖API將軌跡繪製出來。 一:在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine. 在qt5.6的額ui設計師介面中,並不能直
百度地圖API JS 2.0
1.初始化地圖,並設定地圖中心點 var map = new BMap.Map("allmap"); // 建立Map例項 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座
js呼叫百度地圖api實現定位
<?php /** * Created by PhpStorm. * User: onlythen * Date: 5/26/15 * Time: 3:23 PM */ session_start(); require_once("config.php"); $link_id=mys