2. 程式人生 > >騰訊地圖經緯度選擇和圖層功能

騰訊地圖經緯度選擇和圖層功能

阿新 • • 發佈：2018-12-17
$(function () { //其他頁面跳轉攜帶經緯度引數，則定位到該經緯度，否則定位到當前位置 var lngLat = "${param.lngLat}"; if (lngLat != undefined && lngLat != '') { try { var arr = lngLat.split(","); var lng = arr[0]; var lat = arr[1]; init
(lng,lat); } catch (e) { init(); } } else { init(); } bindEvent(); }); var map; var marker; var center; function init(lng,lat) { //定義地圖的中心地理座標 if (lng != undefined && lng !='' &&
lat != undefined && lat != '') { center = new qq.maps.LatLng(parseFloat(lat),parseFloat(lng)); } else { center = new qq.maps.LatLng(36.726032,114.102802); //該方法為非同步 getLocation(); } //初始化地圖 initMap(lng,lat); //建立矩形疊加層，圖片url請修改
createGroundOverlay(); //新增折線覆蓋物 createPolygon(); } //初始化地圖 function initMap() { //定義map變數 呼叫 qq.maps.Map() 建構函式 獲取地圖顯示容器 map = new qq.maps.Map(document.getElementById("allMap"),{ center : center, // 地圖的中心地理座標 zoom : 15, // 預設縮放級別,縮放級別4-17 mapTypeId : qq.maps.MapTypeId.HYBRID, // 衛星地圖模式 mapTypeControl:false, }); //建立一個Marker marker = new qq.maps.Marker({ //設定Marker的位置座標 position: center, //設定顯示Marker的地圖 map: map, draggable:true }); setLngLat(center.getLng(),center.getLat()); } //繫結事件 function bindEvent() { //新增監聽事件 獲取滑鼠單擊事件，新增標記點 qq.maps.event.addListener(map, 'click', function(event) { marker.setMap(null); marker=new qq.maps.Marker({ position:event.latLng, map:map, draggable:true }); setLngLat(event.latLng.getLng(),event.latLng.getLat()); }); } //獲取當前位置 function getLocation(){ var geolocation = new qq.maps.Geolocation("6IWBZ-NGJKP-UT5DR-V7TJL-5U7S2-K4BW4", "yutao"); geolocation.getLocation( function (position) { var lat = position.lat; var lng = position.lng; center = new qq.maps.LatLng(lat,lng); map.setCenter(center); marker.setMap(null); marker=new qq.maps.Marker({ position:center, map:map, draggable:true }); setLngLat(lng,lat); }, function () { center = new qq.maps.LatLng(36.726032,114.102802); }, {timeout: 8000}); } //建立矩形疊加層，圖片url請修改 function createGroundOverlay(){ new qq.maps.GroundOverlay({ map:map, zIndex:-1, imageUrl:Global.contextPath + '/static/pages/monitor/img/yh.png', bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7399126700,114.0859880600), new qq.maps.LatLng(36.7210522200,114.1175883900)) }); new qq.maps.GroundOverlay({ map:map, zIndex:-1, imageUrl:Global.contextPath + '/static/pages/monitor/img/zs1.png', bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7348870300,114.0916279100), new qq.maps.LatLng(36.6876175900,114.1322266000)) }); new qq.maps.GroundOverlay({ map:map, zIndex:-1, imageUrl:Global.contextPath + '/static/pages/monitor/img/py.png', bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7434735600,113.8977854400), new qq.maps.LatLng(36.6955655900,113.9444176500)) }); new qq.maps.GroundOverlay({ map:map, zIndex:-1, imageUrl:Global.contextPath + '/static/pages/monitor/img/zs3.png', bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.6363133800,114.1114188800), new qq.maps.LatLng(36.5997751400,114.1538538600)) }); } // 新增折線覆蓋物 function createPolygon(){ var polygon = new qq.maps.Polygon({ path: [ new qq.maps.LatLng(36.7362187706,114.0991544724), new qq.maps.LatLng(36.7389529065,114.1000986099), new qq.maps.LatLng(36.7378351898,114.1064715385), new qq.maps.LatLng(36.7372333356,114.1064715385), new qq.maps.LatLng(36.7372333356,114.1064715385), new qq.maps.LatLng(36.7367518488,114.1100120544), new qq.maps.LatLng(36.7345507280,114.1096687317), new qq.maps.LatLng(36.7336565046,114.1133165359), new qq.maps.LatLng(36.7231829982,114.1097760201), new qq.maps.LatLng(36.7265023429,114.1034245491), new qq.maps.LatLng(36.7282565500,114.1022658348), new qq.maps.LatLng(36.7283941332,114.1003775597), new qq.maps.LatLng(36.7274654419,114.1000986099), new qq.maps.LatLng(36.7275342343,114.0981030464), new qq.maps.LatLng(36.7280157788,114.0966224670), new qq.maps.LatLng(36.7266915240,114.0947556496), new qq.maps.LatLng(36.7278094030,114.0920305252), new qq.maps.LatLng(36.7322119680,114.0912365913), new qq.maps.LatLng(36.7322119680,114.0912365913), new qq.maps.LatLng(36.7356512963,114.0954422951), new qq.maps.LatLng(36.7364767122,114.0961503983), new qq.maps.LatLng(36.7360124168,114.0991115570) ], strokeColor: '#ff0000', strokeWeight: 1, fillColor: new qq.maps.Color(220,220,220,0.3), map: map }); } //設定經緯度 function setLngLat(lng,lat) { $("#lng").val(lng); $("#lat").val(lat); }

相關推薦

騰訊地圖經緯度選擇和圖層功能

$(function () { //其他頁面跳轉攜帶經緯度引數，則定位到該經緯度，否則定位到當前位置 var lngLat = "${param.lngLat}"; if (lngLat != undefined && lngLat != '')

PIE SDK地圖範圍設定和圖層事件監聽

  1. 功能簡介      地圖範圍設定的監聽就是通過IMapControlEvents介面對地圖的檢視範圍更新或者地圖的解析度發生變化進行監聽，然後做出相應的操作。     圖層事件的監聽就是通過IActiveViewEvents介面對地圖

基於騰訊地圖SDK的Unity定位交友功能的實現

》層級處理     1）地圖 、 UI 層級處理              UI攝像機有五個，camera的depth從49-56。地圖的要在所有UI之下，所以depth設為48。     2）UI，特效層級           特效要夾在在UI之間，所有特效之下的U

由經緯度坐標得到騰訊地圖的瓦片/切片行列號

完整 解決方法 tile 方法 深圳 style earth tails ring 參考：https://blog.csdn.net/mygisforum/article/details/22997879 　　　https://blog.csdn.net/u01392928

騰訊地圖和百度地圖的PHP相互轉換

/** * 百度地圖---->騰訊地圖 * @param double $lat 緯度 * @param double $lng 經度 * @return array(); */ function Convert_BD09_To_GCJ02($lat,$lng){ $x_pi =

騰訊地圖逆地址解析，通過經緯度獲取詳細的資訊資料

根據騰訊地圖API，以圖文的方式一步一步的來說明如何獲取詳細的位置資訊資料。具體參考騰訊地圖Webservice API的簡介。騰訊地圖WebService API 　　第一步：申請開發者金鑰（key）申請金鑰 　　　　　　我選擇的應用型別為瀏覽器型別（呼叫Javascr

對比小程式的地圖api-騰訊地圖，百度地圖和高德地圖

由於公司的專案需要客戶輸入地址後返回經緯度，然後根據返回的收穫地址判斷此地址是否在有效配送範圍內，在查看了微信小程式的自帶的3哥方法後發現不夠用，只能找地圖api來處理，百度了一下發現，網上都推薦百度和高德地圖，就先配用了這2個試試，組出了2個demo。

騰訊地圖和百度地圖的相互轉換

關於百度和騰訊地圖座標轉換的問題，網上大多給的是JS實現的，而JS又是非同步實現的，無法返回值，在有些應用場景下不好使用，這裡我從騰訊論壇上找到了一個PHP轉換的方法，貼出來分享給大家。經測試十分有效

ArcGIS for Android 100.3.0（3）：地圖和圖層（MapView和Layer）

ArcGIS Runtime 中的地圖顯示 在Runtime100裡，增加了3D地圖顯示的功能。為了滿足大多數人的使用習慣，Esri依然採用MapView類作為2D地圖的展示容器，新增了SceneView類作為3D地圖的展示容器，然後這兩個類共同繼承於一個叫G

【Cocos2d-x】坐標系和圖層

pac 多說 pan art world 地圖 分辨 play instance 在Cocos2D-X中，存在四種坐標系： 1、OpenGL坐標系：該坐標系原點在屏幕左下角。x軸向右，y軸向上。這也就是cocos2dx中用到的坐標系所以沒啥好說的。 2、屏幕坐標系（UI

騰訊雲 ubuntuservermysql安裝和外網訪問

時間 with fonts .net start -1 read 每次 mona 1 騰訊雲 購買ubuntu 默認賬戶是ubuntu（因為winscp 使用ubuntu沒有權限寫文件） 因為騰訊雲主機ubuntu系統默認username為ubuntu，不喜歡每次

如何在百度地圖、騰訊地圖標註公司地址信息?

比如百度地圖、騰訊地圖、高德地圖是可以標註公司位置的，不一定是店鋪。所以我們有機會把公司地址在地圖裏標註出來，這樣以後客戶拜訪時就會非常方便。我們遇到很多朋友都是花了幾百塊錢做地圖標註，實際上這一切都是免費的。 首先，我們來看看地圖標註效果。 微信應用場景案例展

iOS 使用騰訊地圖顯示用戶位置註意事項

nag rgb system current info cti iap level zoom 1. 向 target中info 加入 NSLocationWhenInUseUsageDescription，string 類型。值是描寫敘述為什麽須要用

Android 騰訊Bugly——異常上報和應用更新

schema err hidden eno xmlns 哈哈 map ant export 騰訊Bugly，為移動開發者提供專業的異常上報和運營統計，幫助開發者快速發現並解決異常，同時掌握產品運營動態，及時跟進用戶反饋。 首先Bugly有兩大優點，免費，不用審核 使用步驟如

php 百度地圖 騰訊地圖 轉換坐標

() gcj02 OS bsp double -- php 地圖 code /** * 中國正常GCJ02坐標---->百度地圖BD09坐標 * 騰訊地圖用的也是GCJ02坐標 * @param double $lat 緯度 * @param

js仿百度地圖拖拽、縮放、添加圖層功能（原創）

ets tle clas 火狐 相對 inner tlist posit css 最近項目中完成的需求，仿百度地圖中的功能： 要求：1.底層圖可以拖拽、縮放。 　　 2.拖拽一個圖標，在底層圖上對應位置添加一個標註點，該標註點位置要隨底層圖移動。 　　　3.添加的標註

微信小程序 - 輸入起點、終點獲取距離並且進行路線規劃（騰訊地圖）

img -c con XML family maps option space com index.wxml <!--地圖容器--> <map id="myMap" style="width: 100%; height: 300px;"

騰訊地圖H5位置獲取

騰訊地圖H5位置獲取 直接ctrl+c 就行了 直接開啟 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

呼叫騰訊地圖API 獲得當前地理位置

    https://lbs.qq.com/ 騰訊地圖API網址     當時產品說需要做一個定位當前使用者的地址位置的這麼一個需求找了半天最後選擇使用騰訊地圖API    在使用騰訊地圖的時候需要去申請一個開

微信小程式-騰訊地圖顯示偏差問題

背景 在小程式中使用map元件，可以呼叫騰訊地圖的API，將一些固定的點標記到地圖介面上，點的經緯度獲取是通過android端百度地圖API獲取的，所以此時將這個位置點資訊直接設定上去會出現偏差，而且偏差還比較大 小程式設定位置點 關於如何在map元件上設定位置點，詳細請檢視騰訊官方文件 首先