使用google map v3新增經緯度資訊
V3版的Google map,從提供的程式碼結構而言,更加模組化,鏈式操作的感覺也不錯,關鍵代表了未來,所以掌握其使用方法自然 重要。
與地圖相關的應用開發中,常用的技術是將經緯度錄入到後臺庫中,顯示的時候,讀出經緯度,通過google提供的js,將你關注的點在地圖上畫出來。或者可以畫出更多的東西,比如線、多邊形。
以往基於專業地圖系統如mapinfo、esri、中地地圖系統等開發應用軟體,面臨的最大問題是地圖資訊的更新,基於google map這個雲端計算平臺,一切擔憂可以消解。
廢話少說,現在舉一個簡單的例子:當我們點選地圖的時候,可以獲取經緯度資訊,並錄入到後臺系統中。比如我們將一個照片放在地圖的某個點,就需要如此的應用。
js準備,準備好jquery和google的js;
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
html準備;
.....
前面的div是地圖的顯示位置大小;
客戶化的js程式碼準備:主要解決頁面載入幹什麼、點選地圖幹什麼的問題;
//放置marker
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
//這裡根據使用者操作,將經緯度取出來,並複製到input中。
$("#geo-lat").val(marker.getPosition().lat());
$("#geo-lng").val(marker.getPosition().lng());
};
//清除marker,這個函式需要使用,不然你的滑鼠點選之處,都有標記,而你只需要一個。
function clearMarkersBefore() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
};
//這以下是載入頁面要做的事情:初始化,同時在地圖上增加一個事件;
$(function(){
//初始化地圖
mapInit();
google.maps.event.addListener(map, 'click', function(event) {
clearMarkersBefore();
placeMarker(event.latLng);
});
});
後面兩個是經緯度;
後臺準備;
這裡可以使用任何後臺程式,獲取兩個hidden input的值,進行後期處理即可。
提示:
1、在實現的過程中,與v2不同的是對點選地圖形成多個marker的處理,最終發現這種採用陣列的處理方式最好。
2、我的後臺是rails,我還是堅持我的觀點,rails開發應用在開發的時候,介面方面要減少個性化的東西,比如rjs、比如支援google map ym4r等外掛,直接使用javascript(jquery)。相關文章
- 常用經緯度轉換為ntu經緯度
- 微信小程式-如何在map上根據經緯度新增標記點(附原始碼)微信小程式原始碼
- 經緯度轉換
- 米轉換經緯度
- 全國城市經緯度資料
- 呼叫百度api透過經緯度獲取實際地理位置資訊API
- Android 解決Map根據地址返回經緯度方法getFromLocationName()不能正常執行Android
- 勾勒產業緯度與時代經度:座標杜拜,UBBF2021“聯接+新增長”產業
- java 根據兩個位置的經緯度,來計算兩地的距離 經緯度處理Java
- .NET程式獲取當前IP經緯度,並透過經緯度實現天氣查詢功能
- 地理資訊科學教育的新趨勢:探索未來教育的經緯度
- uniapp使用高德地圖解析經緯度轉為中文地址APP地圖圖解
- 中國所有省市區的ip經緯度介面
- java 根據經緯度計算圓周Java
- 經緯度互換和計算距離
- google map aip使用例子程式GoAI
- java百度地圖介面呼叫獲取經緯度Java地圖
- Android高德地圖定位SDK 返回資訊中只有經緯度問題解決Android地圖
- 使用MySQL的geometry型別處理經緯度距離問題MySql型別
- Google MapGo
- iOS中地圖經緯度座標轉換iOS地圖
- JAVA計算兩經緯度間的距離Java
- 如何快速將地址解析為經緯度座標?
- DcatAdmin 透過下拉選擇框搜尋地圖地址(經緯度,城市等資訊)地圖
- asp.net系統中根據經緯度座標,直接呼叫google地圖,顯示位置ASP.NETGo地圖
- 使用Google Map API v2GoAPI
- Cube 緯度分析
- 百度地圖根據經緯度計算瓦片行列號地圖
- google calendar api v3GoAPI
- C#根據經緯度獲取實體地址C#
- 驗證經緯度格式正規表示式程式碼
- ConvertLatOrLonFilter-經緯度格式轉換-保留6位Filter
- java 經緯度處理、計算兩地的距離、獲取當前一定距離以內的經緯度值Java
- 如何使用Python經緯座標模組?Python
- 根據經緯度座標查詢最近的門店
- 經緯度編碼方法推薦-pluscode簡介
- 根據時間經緯度高程計算天頂角
- 智慧手環WIFI熱點和經緯度API獲取WiFiAPI