Fatal编程技术网
  • javascript/
  • Javascript 如何将谷歌ap3地图居中标记？

Javascript 如何将谷歌ap3地图居中标记？

javascript php google-maps-api-3

Javascript 如何将谷歌ap3地图居中标记？,javascript,php,google-maps-api-3,Javascript,Php,Google Maps Api 3,我正在开发一个房地产网站，管理员可以添加到他的项目页面属性。现在，他应该有一个选择，就是添加他所宣传的房产的位置。在我的CMS盘上，我有一张地图，管理员将把他的pin码放到他的特定财产上，然后保存这个。之后，将进入该网站的预期客户将看到管理员之前输入的pin 这是我在管理部分的代码 HTML代码 <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-s

我正在开发一个房地产网站，管理员可以添加到他的项目页面属性。现在，他应该有一个选择，就是添加他所宣传的房产的位置。在我的CMS盘上，我有一张地图，管理员将把他的pin码放到他的特定财产上，然后保存这个。之后，将进入该网站的预期客户将看到管理员之前输入的pin

这是我在管理部分的代码

HTML代码

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(30.0599153,31.2620199,13);
      var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map-canvas"), options);
      var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                 "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                 "<tr><td>Type:</td> <td><select id='type'>" +
                 "<option value='bar' SELECTED>bar</option>" +
                 "<option value='restaurant'>restaurant</option>" +
                 "</select> </td></tr>" +
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
    infowindow = new google.maps.InfoWindow({
     content: html
    });

    google.maps.event.addListener(map, "click", function(event) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
    }

    function saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();

      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
  </head>

  <body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map-canvas" style="width: 800px; height: 600px"></div>
    <div id="message"></div>
  </body>

</html>


谷歌地图JavaScript API v3示例：简单地图
var标记；
var信息窗口；
函数初始化（）{
var latlng=新的google.maps.latlng（30.0599153,31.2620199,13）；
变量选项={
缩放：13，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“地图画布”），选项）；
var html=“”+
“姓名：”+
“地址：”+
“类型：”+
“酒吧”+
“餐厅”+
" " +
"";
infowindow=新建google.maps.infowindow({
内容：html
});
google.maps.event.addListener（映射，“单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
});
}
函数saveData（）{
var name=escape（document.getElementById（“name”）.value）；
var address=escape（document.getElementById（“address”）.value）；
var type=document.getElementById（“type”）.value；
var latlng=marker.getPosition（）；
var url=“phpsqlinfo\u addrow.php？name=“+name+”&address=“+address+
“&type=“+type+”&lat=“+latlng.lat（）+”&lng=“+latlng.lng（）”；
下载url（url、函数（数据、响应代码）{

如果（responseCode==200&&data.length更新：此部分答案仅对管理员方有效

使用
map.setCenter（event.latLng）；
更新映射单击处理程序：


更新：这部分答案适用于客户端

映射必须进行如下初始化：


  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(30.0599153,31.2620199,13),
    zoom: 13,
    mapTypeId: 'roadmap'
  });


如果只有一个标记，则应使用方法
setCenter（）
like（循环的
的一部分）：

如果您有许多标记，无法使用方法
fitBounds（）
，则
for
循环中的更改：


          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          map.setCenter(point);



    var latlngBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });

          latlngBounds.extend(point);

          bindInfoWindow(marker, map, infoWindow, html);
    }

    map.fitBounds(latlngBounds);



var-latlngBounds=new google.maps.latlngBounds（）；
对于（var i=0；i“+地址；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
横向边界延伸（点）；
bindInfoWindow（标记、地图、infoWindow、html）；
}
地图边界（latlngBounds）；



这样会设置地图，使所有标记都可见。
我这样做了，但运气不好，我用你的代码编辑了客户端和管理员的两个文件，但标记仍然没有放在中心，我仍然在我放在这一行的同一个lat lng上看到它
new google.maps.LatLng（30.0599153,31.2620199,13）
I将此行替换为
center:new google.maps.LatLng（30.0599153,31.2620199,13）| | map.setCenter（event.LatLng），
我不明白你把那一行放在哪里？作为地图初始化的
中心：
？你只能在那里使用有效的latLng。对不起，我对这个谷歌地图和Java非常陌生，我把这一行放在客户查看地图的页面上，如果我错了，请告诉我在哪里可以用你的abo编辑代码ve codeYes这解决了我的问题，非常感谢@Anto Jurković。我似乎误解了你的问题。你从数据库中读取了多少个标记。一个或多个？如果你有很多标记，你如何知道哪一个标记将用于中心？你是否使用
type
属性？@Anto Jurković你从数据库中读取了多少个标记？每个项目将有一张地图，因此项目将根据项目id读取一张地图。

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });

    map.setCenter(event.latLng);

    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
});



  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(30.0599153,31.2620199,13),
    zoom: 13,
    mapTypeId: 'roadmap'
  });



          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          map.setCenter(point);



    var latlngBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });

          latlngBounds.extend(point);

          bindInfoWindow(marker, map, infoWindow, html);
    }

    map.fitBounds(latlngBounds);