Google地图V3:只显示一些标记 [英] Google Map V3 : Only some markers are displayed

查看:113
本文介绍了Google地图V3:只显示一些标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有下面的代码,它应该为数组中的位置显示几个标记,每个点击标记都会显示一个信息窗口,除了21个地方外,我只能显示8个标记。

  //声明变量
var geocoder;
var map;
var tex;
var markersArray = [];
// pids array 21 addreses
var pids = [{ad:'251 Pantigo Road Hampton Bays NY 11946',pid:'9'},
{ad:'Amagensett Quiogue NY 11978 ',pid:'10'},
{ad:'789 Main Street Hampton Bays NY 11946',pid:'12'},
{ad:'30亚伯拉罕路径汉普顿海湾NY 11946', pid:'14'},
{ad:'3 Winnebogue Ln Westhampton NY 11977',pid:'15'},
{ad:'44 White Oak Lane Montauk NY 11954',pid:' '',
{ad:'107 stoney hill road Bridgehampton NY 11932',pid:'17'},
{ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'19' },
{ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'20'},
{ad:'44 Woodruff Lane Wainscott NY 11975',pid:'21'},
{ad:'Address East Hampton NY 11937',pid:'46'},
{ad:'Address Amagansett NY 11930',pid:'49'},
{ad:'地址Remsenburg NY 11960',pid:'50'},
{ad:'Address Westhampton NY 11977',pid:'5 1'},
{ad:'prop address Westhampton Dunes NY 11978',pid:'52'},
{ad:'prop address East Hampton NY 11937',pid:'53'},
{ad:'East East Hampton NY 11937',pid:'58'},
{ad:'Address Southampton NY 11968',pid:'59'},
{ad: 'Address Address Bridgehampton NY 11932',pid:'60'},
{ad:'Address Sagaponack NY 11962',pid:'61'}];

//创建一个MVCobject,用于在marker
上创建Info窗口var pin = new google.maps.MVCObject();
//信息窗口的内容占位符。
var content = document.createElement(DIV);
var title = document.createElement(DIV);
content.appendChild(title);
//这就是你放置ajax结果的位置
var streetview = document.createElement(DIV);
streetview.style.width =326px;
streetview.style.height =212px;
content.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({
content:content
});
//初始化
函数initialize(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.8687097,-73.0014946);
var myOptions = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map(document.getElementById(map_canvas),myOptions);
getAllPids();
}
//循环创建所有标记
函数getAllPids(){
var i;
for(i = 0; i< pids.length; i ++){
var test = pids [i];
codeAddress(test);

$ b $ //获取每个地址的latlng,创建标记并添加eventlistner来点击打开infowindow
函数codeAddress(place){
geocoder.geocode({ 'address':place.ad},function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var marker = new google.maps.Marker({ b $ b map:map,
position:results [0] .geometry.location,
title:place.pid
});
markersArray.push(marker);
google.maps.event.addListener(marker,click,function(){
openInfoWindow(marker);
});
} else {
//警报(地理编码不成功,原因如下:+状态);
}
});
}
//标记上的点击事件会调用它来显示infowindow。
函数openInfoWindow(marker){
getContent(marker.getTitle());
pin.set(position,marker.getPosition());
infowindow.open(map,marker);

//现在ajax调用获取当前信息窗口的内容
function getContent(pid){
$ .ajax({
type:POST ,
url:mapSearchResult.aspx / get_map,
data:{'pids':'+ pid +'},
contentType:application / json; charset = utf-8,
dataType:json,
成功:函数(msg){

title.innerHTML = msg.d;

}
});

$ / code>


解决方案

p>

  // alert(由于以下原因,Geocode不成功:+ status); 

您会发现原因码 OVER_QUERY_LIMIT (620)。



有一个速度限制:如果您在不引入延迟的情况下对多个地址进行地理编码,则会打破该限制,因为您在太短的时间内执行太多操作。



有些的地址不会进行地理编码(或不会生成您想要的结果),因为地理编码器使用邮政地址。 Address East Hampton NY 11937 prop address Westhampton Dunes NY 11978 的地址不是邮寄地址。

推荐的策略不是浪费Google与其他人分享的资源。在一次性操作中对自己的地址进行地理编码,将这些位置存储在数据库中(或直接在代码中使用它们),然后使用坐标定位标记。每次加载页面时,不要打扰查找您已知的位置。只有使用地理编码器才能预先找到您不知道的位置:您的用户输入的地址。



如果您确实必须始终颠覆该策略并对所有内容进行地理编码,那么你需要减慢请求速度。在您提交更多请求时,您可能不得不减慢速度以满足地理编码器的要求。我已经在 http://acleach.me.uk上发布了第3版的示例(来自着名的第2版示例) /gmaps/v3/plotaddresses.htm —你可以看到它在请求之间延迟了100ms,但在迭代20次后需要减速到150ms左右。

I have the following code which should display several markers for places in an array and each marker on click will display an info window everything works fine except that out of 21 places I am able to display only 8 Markers.

// declare Variables
   var geocoder;
   var map;
   var tex;     
   var markersArray = [];
   // pids array 21 addreses
    var pids = [{ad:'251 Pantigo Road Hampton Bays NY 11946',pid:'9'},
    {ad:'Amagensett Quiogue NY 11978',pid:'10'},
    {ad:'789 Main Street Hampton Bays NY 11946',pid:'12'},
    {ad:'30 Abrahams Path Hampton Bays NY 11946',pid:'14'},
    {ad:'3 Winnebogue Ln Westhampton NY 11977',pid:'15'},
    {ad:'44 White Oak Lane Montauk NY 11954',pid:'16'},
    {ad:'107 stoney hill road Bridgehampton NY 11932',pid:'17'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'19'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'20'},
    {ad:'44 Woodruff Lane Wainscott NY 11975',pid:'21'},
    {ad:'Address East Hampton NY 11937',pid:'46'},
    {ad:'Address Amagansett NY 11930',pid:'49'},
    {ad:'Address Remsenburg NY 11960 ',pid:'50'},
    {ad:'Address Westhampton NY 11977',pid:'51'},
    {ad:'prop address Westhampton Dunes NY 11978',pid:'52'},
    {ad:'prop address East Hampton NY 11937',pid:'53'},
    {ad:'Address East Hampton NY 11937',pid:'58'},
    {ad:'Address Southampton NY 11968',pid:'59'},
    {ad:'Address Bridgehampton NY 11932',pid:'60'},
    {ad:'Address Sagaponack NY 11962',pid:'61'}];

    // create an MVCobject for creating Info window on marker
   var pin = new google.maps.MVCObject();
   // The content placeholder for the Info window. 
   var content = document.createElement("DIV");   
   var title = document.createElement("DIV");
   content.appendChild(title);
   // that is where you have the ajax result placed
   var streetview = document.createElement("DIV");
   streetview.style.width = "326px";
   streetview.style.height = "212px";
   content.appendChild(streetview);
   var infowindow = new google.maps.InfoWindow({
       content: content
   });
       // Initialize
   function initialize() {
       geocoder = new google.maps.Geocoder();
       var latlng = new google.maps.LatLng(40.8687097, -73.0014946);
       var myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       getAllPids();
   }
   // loop to create all markers
   function getAllPids() {
       var i;
      for (i = 0; i < pids.length; i++) {
           var test = pids[i];
           codeAddress(test);
       }        
   }
   // get latlng for each address , create marker  and add eventlistner to click open infowindow 
   function codeAddress(place) {
       geocoder.geocode({ 'address': place.ad }, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location,
                   title: place.pid
               });
               markersArray.push(marker);                  
               google.maps.event.addListener(marker, "click", function() {
                   openInfoWindow(marker);
               });
            } else {
               // alert("Geocode was not successful for the following reason: " + status);
           }
       });
   }
   // click event on marker calls this to show infowindow.
   function openInfoWindow(marker) {        
    getContent(marker.getTitle());          
       pin.set("position", marker.getPosition());
       infowindow.open(map, marker);
   }
   // Now ajax call to get the content for the current info window
   function getContent(pid) {          
      $.ajax({
                        type: "POST",
                        url: "mapSearchResult.aspx/get_map",                            
                        data: "{'pids':'"+pid +"'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(msg) {

                         title.innerHTML =msg.d; 

                        }
                    });          
   }

解决方案

If you uncommented this

// alert("Geocode was not successful for the following reason: " + status);

you would find that the reason code is OVER_QUERY_LIMIT (620).

There is a rate limit: if you geocode many addresses without introducing a delay between them you will break that limit because you are doing too many in too short a time.

Some of your addresses won't geocode (or won't produce the result you want), because the geocoder uses postal addresses. Addresses like Address East Hampton NY 11937 or prop address Westhampton Dunes NY 11978 aren't postal addresses.

The recommended strategy is not to waste Google's resources which you share with others. Geocode your addresses yourself in a one-off operation, store those locations in your database (or use them directly in code) and then use the coordinates to position markers. Don't bother to find locations you already know about every time the page is loaded. Only use the geocoder to find locations you don't know in advance: addresses entered by your users.

If you really must subvert that strategy and geocode everything all the time, then you need to slow the requests down. As you submit more requests, you will probably have to slow them down more to satisfy the geocoder. I've made a Version 3 example (from a noted Version 2 example) at http://acleach.me.uk/gmaps/v3/plotaddresses.htm — you can see it starts out with a 100ms delay between requests, but needs to slow down to around 150ms after twenty iterations.

这篇关于Google地图V3:只显示一些标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆