如何使用Google Maps JavaScript API v3的click事件显示聚焦于标记的地图? [英] How to show a map focused on a marker using a click event on Google Maps JavaScript API v3?

问题描述

我创建了一个专注于用户位置的地图.该地图只有一个带有信息窗口的标记.当用户单击信息窗口时，它将为他提供指向信息页面(info.html)的超链接.我想创建一个选项，该选项将允许用户从信息页面返回到地图，并且地图应集中在同一标记上(而不是在他当前的位置上).基本上是相反的方式.听起来很简单，但是我不知道该如何编码.我想我可以为每个标记建立一个不同的地图，但这似乎不太可能是正确的解决方案.任何帮助，将不胜感激.

I created a map that focuses on a user's location. The map has a single marker with an info window. When a user clicks on the info window it gives him a hyperlink to an info page (info.html). I want to create an option that will allow the user to go back from the info page to the map, and the map should be focused on the same marker (not on his current location). It's basically going the opposite way. It sounds pretty simple, but I have no idea how to code this. I guess I can build a different map for every marker, but that seems highly unlikely to be the right solution. Any help would be appreciated.

这是我对脚本的尝试，( initialize2()不起作用):

This is my attempt with the script, (initialize2() doesn't work):

$(document).ready(function() {
    getLocation();
});

var map;
var jones = new google.maps.LatLng(40.59622788325198, -73.50334167480469);

function getLocation() {
    navigator.geolocation.getCurrentPosition(
        function(position) {
            var myLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            map.setCenter(myLatLng);   
        },
        function() {
            alert("Please enable location detection on your device");
        }
    );
}

function initialize() {
    var mapOptions = {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infowindow = new google.maps.InfoWindow({
    });

    var marker1 = new google.maps.Marker({
        position: jones,
        map: map
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.setContent('<h4>Jones Beach</h4><a href="info.html">See info</a>');
        infowindow.open(map,marker1);   
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

// this is my attempt to focus on the marker
// there will be a button that will evoke this function from info.html
function initialize2() {
  var mapOptions2 = {
    zoom: 14,
    center: new google.maps.LatLng(40.59622788325198, -73.50334167480469),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions2);
}

google.maps.event.addDomListener(window, 'load', initialize2);

推荐答案

在URL中使用哈希怎么办?

What about using a hash in the url?

尝试使用" http://students.example.com/test.html#one":

$(function() {

    var places = {
        one: [40.59622788325198, -73.50334167480469],
        two: [50.59622788325198, -71.50334167480469]
    };

    var div = $('#map-canvas');

    var map = new google.maps.Map(div.get(0), {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = {};

    $.each(places, function(name) {

        markers[name] = new google.maps.Marker({
            position: new google.maps.LatLng(this[0], this[1]),
            map: map
        });

    });

    var place = location.hash.substr(1);

    if(place in places) {

        map.setCenter(markers[place].getPosition());

    }

});

这篇关于如何使用Google Maps JavaScript API v3的click事件显示聚焦于标记的地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！