![](/img/trans.png)
[英]How to map the pixel location of a marker on Google Map to Latitude and Longitude
[英]How to set google map marker by latitude and longitude and provide information bubble
以下示例代碼由google maps api提供
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
以下僅顯示沒有標記的位置的谷歌地圖。 我想知道如何通過給出緯度/經度參數來放置標記? 如何將從數據庫中提取的自己的信息存儲在該標記上?
這是一個JSFiddle演示 ,向您展示如何通過Lat Lng設置谷歌地圖標記,以及點擊時會給您一個信息窗口(氣泡):
這是我們的基本HTML,點擊時有3個超鏈接,在地圖上添加一個標記:
<div id="map_canvas"></div>
<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>
首先,我們設置2個全局變量。 一個用於地圖,另一個用於保存我們的標記:
var map;
var markers = [];
這是我們初始化創建谷歌地圖:
function initialize() {
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
然后我們創建3個lat lng位置,我們想放置我們的標記:
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
在這里,我們創建一個函數,根據傳遞給它的內容添加我們的標記。 myloc將是美國,巴西或阿根廷,然后我們根據傳遞的參數創建標記。 在addMarker函數中,我們檢查並確保我們不通過調用for循環在地圖上創建重復標記,如果我們已經創建了傳遞的param,那么我們返回函數並且什么都不做,否則我們創建標記並將其推送到全局標記數組。 創建標記后,我們通過markers[markers.length-1]['infowin']
markers.length-1基本上獲取陣列上新推的標記來附加信息窗口及其相關標記。 在信息窗口中,我們使用html設置內容。 這基本上是您放入氣泡或信息窗口的信息(它可以是您可以使用天氣API等填充的天氣信息)。 在附上信息窗口后,我們使用Google Map API的addListener附加一個onclick事件監聽器,當點擊標記時,我們想通過調用this['infowin'].open(map, this)
與之關聯的信息窗口this['infowin'].open(map, this)
地圖是我們的全球地圖,這是我們當前將onclick事件與之關聯的標記。
function addMarker(myloc) {
var current;
if (myloc == 'usa') current = usa;
else if (myloc == 'brasil') current = brasil;
else if (myloc == 'argentina') current = argentina;
for (var i = 0; i < markers.length; i++)
if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;
markers.push(new google.maps.Marker({
map: map,
position: current,
title: myloc
}));
markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
content: '<div>This is a marker in ' + myloc + '</div>'
});
google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
this['infowin'].open(map, this);
});
}
完成所有操作后,我們基本上附加了window.onload
事件並調用initialize函數:
window.onload = initialize;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.