如何由緯度和經度設置谷歌地圖標記和提供信息氣泡

Question

谷歌提供的下面的示例代碼地圖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); 
      } 

以下僅示出了位置的谷歌地圖沒有一個標記。 我想知道如何通過提供緯度/經度參數來放置標記？ 怎麼可能將自己的信息從數據庫中提取出來？

Answer 1

這裏是一個JSFiddle Demo，告訴您如何通過LAT LNG設定的谷歌地圖標記，也當點擊會給你一個信息窗口（氣泡）：

這是我們與3個超鏈接基本的HTML點擊時增加一個標記到地圖上：

<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個緯度經度位置，我們希望把我們的標記：

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循環在地圖上創建重複標記，並且如果我們傳遞的參數已經創建，那麼我們將返回該函數並且什麼也不做，否則我們創建標記並將其推入全局標記數組中。在創建標記之後，我們通過做markers[markers.length-1]['infowin'] markers.length-1基本上獲取陣列上新推動的標記，然後附加信息窗口及其相關標記。在信息窗口中，我們使用html設置內容。這基本上是您放入泡泡或信息窗口的信息（可以是天氣信息，您可以使用天氣API等來填充）。附加信息窗口後，我們使用Google Map API的addListener附加onclick事件監聽器，當點擊標記時，我們想通過調用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事件並調用初始化函數：

window.onload = initialize;