Google Maps Api：如何添加标记和语音气泡？答案

【问题标题】：Google Maps Api: How to add a marker and speech bubble?Google Maps Api：如何添加标记和语音气泡？
【发布时间】：2019-05-22 18:06:25
【问题描述】：

我已经设法在我的网站上使用谷歌地图的 Javascript api 获得了谷歌地图......而且效果很好......

谁能告诉我如何添加语音气泡和标记...如图所示...http://code.google.com/apis/maps/

基本上我的网站显示了一个简单的地图，但它缺少办公室所在位置的标记和我想放置办公室地址的气泡

任何帮助将不胜感激。

这是我目前的代码

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(40.466997, -3.705482), 13);


}

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

可以使用GMarker 类添加标记；例如，要在地图上添加一个点，我会使用这样的东西：

var point = new GPoint(45.779915302498935, 4.803814888000488);
var marker = new GMarker(point);
map.addOverlay(marker);

（当然，您必须将坐标调整到您办公室的坐标，所以它并不指向法国的某个点^^；我想您发布的那些应该可以解决问题； -) )

对于信息窗口，您可以在标记上使用GMarker.openInfoWindowHhtml 方法。

我想这样的事情应该可以解决问题：

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(40.466997, -3.705482), 13);

    var point = new GPoint(-3.705482, 40.466997);
    var marker = new GMarker(point);  // Create the marker
    map.addOverlay(marker);           // And add it to the map

    // And open some infowindow, with some HTML text in it
    marker.openInfoWindowHtml(
        'Hello, <strong>World!</strong>'
    );
}

结果如下所示：

_{（来源：pascal-martin.fr）}

现在，由你来构建 ;-)

【讨论】：

【解决方案2】：

这里有一些代码展示了如何使用 XML 文件加载多个标记。 this 网站也是最好的谷歌地图示例和教程

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the side_bar
    //gmarkers.push(marker);
    // add a line to the side_bar html
    //side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
    return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
}  

$(document).ready(function(){
    // When class .map-overlay-right is clicked map is loaded
    $(".map-overlay-right").click(function () {
        var map = new GMap2(document.getElementById('map-holder'));
        $("#map-holder").fadeOut('slow', function(){                                    
            var gmarkers = [];  
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            // Get XML file that contains multiple markers
            $.get("http://www.foo.com/xml-feed-google-maps",{},function(xml) {
                $('marker',xml).each(function(i) {
                                    // Parse the XML Markers
                    html = $(this).text();
                    lat = $(this).attr("lat");
                    lng = $(this).attr("lng");
                    label = $(this).attr("label");
                    var point = new GLatLng(lat,lng);
                    var marker = createMarker(point,label,html);
                    map.addOverlay(marker);
                });
            });

        });
        $("#map-holder").fadeIn('slow');
        var Asia = new GLatLng(19.394068, 90.000000);
        map.setCenter(Asia, 4); 
    });     
});

【讨论】：