Question

我想在href点击时加载Google不同的坐标。例如

<a href="#location1">Location 1</a>
<a href="#location2">Location 2</a>
<a href="#location3">Location 3</a>

在此之下有一个DIV加载谷歌地图，从上面的链接加载位置。

<div id="map-container" class="col-md-12 no-gutter" style="height:500px;"></div>

以下是使用单个位置加载Map的脚本。

<script type="text/javascript">
    function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(51.520904, -0.107466),
                zoom: 17,
                draggable: false,
                scrollwheel: false,
                disableDoubleClickZoom: true,
                zoomControl: false
            };
            var map = new google.maps.Map(document.getElementById("map-container"),
                mapOptions);

            var styles = [
                {
                    featureType: "landscape.man_made",
                    elementType: "geometry",
                    stylers: [
                        { visibility: "on" },
                        { color: "#d4ebf4" }
                    ]
                },
                {
                    featureType: "road",
                    elementType: "labels.text.fill",
                    stylers: [
                        { visibility: "on" },
                        { color: "#202020"}
                    ]
                },
                {
                    featureType: "poi.business",
                    elementType: "all",
                    stylers: [
                        { visibility: "on" }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "all",
                    stylers: [
                        { color: "#98d1e8" }
                    ]
                },
                {
                    featureType: "poi.school",
                    elementType: "all",
                    stylers: [
                        { visibility: "off" },
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "all",
                    elementType: "geometry.stroke",
                    stylers: [
                        { visibility: "off" }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "labels.text.fill",
                    stylers: [
                        { visibility: "off" }
                    ]
                },
                {
                    featureType: "transit.station.rail",
                    elementType: "labels.icon",
                    stylers: [
                        { hue: "#005eff" },
                        { saturation: -37 }
                    ]
                },
                {
                    featureType: "poi.park",
                    elementType: "labels.text.stroke",
                    stylers: [
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "road.local",
                    elementType: "all",
                    stylers: [
                        { color: "#ffffff" }
                    ]
                },
                {
                    featureType: "all",
                    elementType: "labels.text.fill",
                    stylers: [
                        { color: "#808080" }
                    ]
                },
                {
                    featureType: "transit.line",
                    elementType: "all",
                    stylers: [
                        { color: "#ffffff" }
                    ]
                }
            ];

            map.setOptions({styles: styles});


            var blueIco = {
                url: "<?php bloginfo('template_directory'); ?>/images/map-pin.png",
                size: new google.maps.Size(55, 73),
                anchor: new google.maps.Point(28, 72)
            };

            var latLng = new google.maps.LatLng(51.520904, -0.107466);

            marker = new google.maps.Marker({
                map: map,
                position: latLng,
                animation: google.maps.Animation.DROP,
                icon: blueIco,
                normalIcon: blueIco
            });

            google.maps.event.addListener(marker, "mouseout", function (event) {
                this.setIcon(this.normalIcon);
                infowindow.close();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

为什么不使用一些Google地图API来简化它。喜欢

Maplace

这是

Codepen Demo

和代码：

HTML

<div id="gmap"></div>

<div id="menu">
  <a href="javascript:void(0);" class="loc_link" data-lat="12.58" data-long="77.38" data-title="Bangalore" data-html="Bangalore, Karnataka, India">A</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="31.2" data-long="121.5" data-title="Shanghai" data-html="Shanghai, China">B</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="35.6895" data-long="139.6917" data-title="Tokyo" data-html="Tokyo, Japan">C</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="28.6139" data-long="77.2089" data-title="New Delhi" data-html="New Delhi, India">D</a>

  <a href="javascript:void(0);" class="loc_link" data-lat="40.7127" data-long="74.0059" data-title="New York" data-html="New York City">E</a>

 <br/>
  <span id="tool_tip">Click links to see effect!</span>
</div>

CSS

#gmap{
width: 70%;
height: 350px;
margin: 0 auto;
}

#menu {
 width: 300px;
 margin: 15px auto;
 text-align:center;
}
#menu a.loc_link {
 background: #0f89cf;
 color: #fff;
 margin-right: 10px;
 display: inline-block;
 margin-bottom:10px;
 padding: 5px;
 border-radius: 3px;
 text-decoration: none;
}
#menu span#tool_tip {
  display: inline-block;
  margin-top: 10px;
}

JQuery的

$(function(){
var map;
var LocA = [{
    lat: 12.58,
    lon: 77.38,
    title: 'Bangalore',
    html: 'Bangalore, Karnataka, India',
    zoom: 4,
    icon: 'http://maps.google.com/mapfiles/markerA.png',
    animation: google.maps.Animation.DROP
 }];

map = new Maplace({
  locations: LocA,
  map_div: '#gmap',
  generate_controls: false,
  start: 0   
}).Load();


$(".loc_link").click(function(){
  var newLoc = [{
      lat: $(this).data('lat'),
      lon: $(this).data('long'),
      title: $(this).data('title'),
      html: $(this).data('html'),
      zoom: 4,
      icon: 'http://maps.google.com/mapfiles/marker'+$(this).text()+'.png',
    animation:google.maps.Animation.DROP
  }];
 map.AddLocations(newLoc).Load();
 map.ViewOnMap($(this).index()+1);
});
});

Answer 2

相关问题：Google Maps Onclick panTo new location Too Much Recursion error。

proof of concept fiddle

工作代码段：

＆＃13;

var map, marker;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.520904, -0.107466),
    zoom: 17,
    draggable: false,
  };
  map = new google.maps.Map(document.getElementById("map-container"),
    mapOptions);

  var blueIco = {
    url: "http://maps.google.com/mapfiles/ms/icons/blue.png",
    size: new google.maps.Size(55, 73),
    anchor: new google.maps.Point(28, 72)
  };

  var latLng = new google.maps.LatLng(51.520904, -0.107466);

  marker = new google.maps.Marker({
    map: map,
    position: latLng,
    animation: google.maps.Animation.DROP,
    icon: blueIco,
    normalIcon: blueIco
  });

  google.maps.event.addListener(marker, "mouseout", function(event) {
    this.setIcon(this.normalIcon);
    infowindow.close();
  });
  $('.location').on('click', function() {
    var latlonStr = $(this).data('location')
    var coords = latlonStr.split(",");
    var latLng = new google.maps.LatLng(coords[0], coords[1]);
    pan(latLng);
    if (marker && marker.setMap) {
      marker.setMap(null);
    }
    marker = new google.maps.Marker({
      map: map,
      position: latLng,
      animation: google.maps.Animation.DROP,
      icon: blueIco,
      normalIcon: blueIco
    });


  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function pan(latlon) {
  map.panTo(latlon)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container" class="col-md-12 no-gutter" style="height:500px;"></div>
<a name="locations"></a>

<ul>
  <li><a class="location" data-location="52.240477,-0.902656">northampton</a>

  </li>
  <li><a class="location" data-location="51.454265,-0.97813">reading</a>

  </li>
  <li><a class="location" data-location="51.262251,-0.467252">surrey</a>

  </li>
  <li><a class="location" data-location="51.555774,-1.779718">swindon</a>

  </li>
  <li><a class="location" data-location="51.864211,-2.238033">gloucestershire</a>

  </li>
</ul>

＆＃13;

在Google地图上加载位置点击

2 个答案:

Maplace

Codepen Demo

HTML

CSS

JQuery的