Javascript 如何按纬度和经度设置谷歌地图标记并提供信息气泡

How to set google map marker by latitude and longitude and provide information bubble

提问by xiaolin

The following sample code provided by google maps api

以下示例代码由 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);
          }

the following only shows google map of the location without a marker. I was wondering how I can place a marker by giving latitude/longitude parameters? And how is it possible to store my own information pulled from a database on that marker?

以下仅显示没有标记的位置的谷歌地图。我想知道如何通过提供纬度/经度参数来放置标记？以及如何将我自己从数据库中提取的信息存储在该标记上？

回答by u476945

Here is a JSFiddle Demothat shows you how to set a google map marker by Lat Lng and also when click would give you an information window (bubble):

这是一个JSFiddle 演示，向您展示如何通过 Lat Lng 设置谷歌地图标记，以及何时点击会给您一个信息窗口（气泡）：

Here is our basic HTML with 3 hyperlinks when clicked adds a marker onto the map:

这是我们的基本 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/>

First we set 2 global variables. one for map and another an array to hold our markers:

首先我们设置2个全局变量。一个用于地图，另一个用于保存我们的标记的数组：

var map;
var markers = [];

This is our initialize to create a google map:

这是我们创建谷歌地图的初始化：

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);
}

We then create 3 lat lng locations where we would like to place our markers:

然后我们创建 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);

Here we create a function to add our markers based on whatever is passed onto it. myloc will be either usa, brasil or argentina and we then create the marker based on the passed param. With in the addMarker function we check and make sure we don't create duplicate marker on the map by calling the for loop and if we the passed param has already been created then we return out of the function and do nothing, else we create the marker and push it onto the global markers array. After the marker is created we then attach an info window with it's associated marker by doing markers[markers.length-1]['infowin']markers.length-1 is just basically getting the newly pushed marker on the array. Within the info window we set the content using html. This is basically the information you put into the bubble or info window (it can be weather information which you can populate using a weather API and etc). After info window is attached we then attach an onclick event listener using the Google Map API's addListener and when the marker is clicked we want to open the info window that is associated with it by calling this['infowin'].open(map, this)where the map is our global map and this is the marker we are currently associating the onclick event with.

在这里，我们创建了一个函数来根据传递给它的任何内容添加我们的标记。myloc 将是美国、巴西或阿根廷，然后我们根据传递的参数创建标记。在 addMarker 函数中，我们通过调用 for 循环检查并确保我们没有在地图上创建重复的标记，如果我们已经创建了传递的参数，那么我们从函数中返回并且什么都不做，否则我们创建标记并将其推送到全局标记数组。创建标记后，我们然后通过执行以下操作附加一个信息窗口及其关联的标记markers[markers.length-1]['infowin']marker.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);
    });
}

When all is done we basically attach window.onloadevent and call the initialize function:

当一切都完成后，我们基本上附加window.onload事件并调用初始化函数：

window.onload = initialize;