Question

我还在学习javascript并不太专业，这是我的第一篇文章。

的JavaScript

function initialize() {

     // Create the map 
     // No need to specify zoom and center as we fit the map further down.
     var map = new google.maps.Map(document.getElementById("map_canvas"), {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         streetViewControl: false,

     });

     // Create the shared infowindow with two DIV placeholders
     // One for a text string, the other for the StreetView panorama.
     var content = document.createElement("DIV");
     var title = document.createElement("DIV");
     content.appendChild(title);
     var streetview = document.createElement("DIV");
     streetview.style.width = "200px";
     streetview.style.height = "200px";
     content.appendChild(streetview);
     var infowindow = new google.maps.InfoWindow({
         content: content
     });


     var markers = [{
         lat: 35.15074,
         lng: -89.955992,
         name: "Bob 1"
     }, {
         lat: 35.149425,
         lng: -89.946595,
         name: "Bob 2"
     }, {
         lat: 35.146687,
         lng: -89.929837,
         name: "Bob 3"
     }, {
         lat: 35.132264,
         lng: -89.937197,
         name: "Bob 4"
     }];

     // Create the markers
     for (index in markers) addMarker(markers[index]);

     function addMarker(data) {
         var marker = new google.maps.Marker({
             position: new google.maps.LatLng(data.lat, data.lng),
             map: map,
             title: data.name
         });

         google.maps.event.addListener(marker, "click", function () {
             openInfoWindow(marker);
         });
     }

     // Zoom and center the map to fit the markers
     // This logic could be conbined with the marker creation.
     // Just keeping it separate for code clarity.
     var bounds = new google.maps.LatLngBounds();
     for (index in markers) {
         var data = markers[index];
         bounds.extend(new google.maps.LatLng(data.lat, data.lng));
     }
     map.fitBounds(bounds);

     // Handle the DOM ready event to create the StreetView panorama
     // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
     var panorama = null;
     var pin = new google.maps.MVCObject();
     google.maps.event.addListenerOnce(infowindow, "domready", function () {
         panorama = new google.maps.StreetViewPanorama(streetview, {
             navigationControl: false,
             enableCloseButton: false,
             addressControl: false,
             linksControl: false,
             visible: true
         });
         panorama.bindTo("position", pin);
     });

     // Set the infowindow content and display it on marker click.
     // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
     function openInfoWindow(marker) {
         title.innerHTML = marker.getTitle();
         pin.set("position", marker.getPosition());
         infowindow.open(map, marker);
     }
 }

我有4个不同的地方，然后我需要添加4个网页，如何告诉浏览器我想要缩放特定位置。假设我想放大“Bob 1”。然后我将网页重命名为bob1.html。每当我点击bob1.html时，网页都会缩放zoom: 15并且标记位于地图的中心位置

Answer 1

除非这是规范的一部分，否则您不需要有四个不同的页面？

要设置地图的位置和缩放级别，只需调用：

map.setCenter(yourLatLngOrMarkerPosition);

并设置缩放级别：

map.setZoom(yourZoomLevel);

这些可以在地图实例化之后的任何时候设置，所以可能是按钮点击或一段时间后？

希望这有帮助。

编辑为了考虑您的要求（在评论中提到），我会在点击链接后提交相关的网址帖子参数。在每个地图页面的初始化函数中，您需要使用类似于Here的内容读取这些内容（尽管这使用jQuery）并根据需要设置地图选项。

编辑您可以使用php读取url post参数，然后在google maps调用中的相应位置回显它们。

例如：

map.setZoom(<?php echo $_GET['urlZoomParam'];?>);

等。

一些通用的PHP / MYSQL / Google Maps堆栈文档：https://developers.google.com/maps/articles/phpsqlajax_v3 https://developers.google.com/maps/articles/phpsqlsearch_v3 http://theoryapp.com/online-store-locator-using-php-mysql-and-google-maps/

Google Maps v3缩放特定位置

1 个答案: