如何根据纬度和经度设置谷歌地图标记并提供信息泡泡 [英] How to set google map marker by latitude and longitude and provide information bubble

问题描述

下面的示例代码由google提供了map api

  var geocoder; 
 var map; 
函数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）'>点击以添加美国< / a>< br /> 
< a href ='javascript：addMarker（brasil）'>点击添加巴西< / a>< br /> 
< a href ='javascript：addMarker（argentina）'>点击添加阿根廷< / a>< br /> 
  

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

  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循环在地图上创建重复标记，并且如果我们传递的参数已经创建，那么我们将返回该函数并且什么也不做，否则我们创建标记并将其推入全局标记数组中。在创建标记之后，我们通过执行标记[marker.length-1] ['infowin'] markers.length-1基本上获得阵列上新推动的标记。在信息窗口中，我们使用html设置内容。这基本上是您放入泡泡或信息窗口的信息（可以是天气信息，您可以使用天气API等来填充）。在附加信息窗口之后，我们使用Google Map API的addListener附加onclick事件监听器，当点击标记时，我们希望通过调用 this ['infowin']来打开与之关联的信息窗口.open（map，this）地图是我们的全球地图，这是我们当前将onclick事件与之关联的标记。

 函数addMarker（myloc）{
 var current; 
 if（myloc =='usa'）current = usa; 
 else if（myloc =='brasil'）current = brasil; 
 else if（myloc =='argentina'）current = argentina; $（b）为（var i = 0; i< markers.length; i ++）
 if（current.lat（）=== markers [i] .position.lat（）&& amp; 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>这是'+ myloc + '< / div>'
}）; 
 
 google.maps.event.addListener（markers [markers.length  -  1]，'click'，function（）{
 this ['infowin']。open（map，this） ; 
}）; 
} 
  

完成所有操作后，我们将 window.onload 事件并调用初始化函数：

  window.onload = initialize; 
  

The following sample code provided by 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?

解决方案

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

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

<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:

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:

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.

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.onload event and call the initialize function:

window.onload = initialize;

这篇关于如何根据纬度和经度设置谷歌地图标记并提供信息泡泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！