基于清单AJAX的Google地图API - Google Map API with Listing AJAX based

Google Map API with Listing AJAX based

本文关键字：地图 API Google 于清单 AJAX | 更新日期: 2023-09-27

请参阅本参考网站

http://www.kw.com/kw/propertysearch.html

在这个网站你可以看到一个特殊的东西在地图上。如果您拖放，缩放映射到特定的指针，那么清单(在底部)将自动刷新基于AJAX。

我想在我的网站同样的事情，我已经使用谷歌地图API，但以这种方式我从来没有使用过。请建议我一些插件，API使用，我可以实现这一点。

谢谢灰

您不需要为此使用Ajax(尽管对于大型标记集合可能更好)。

看，标记，作为任何JS对象，可以拥有无限的属性。例如，如果将标记声明为

var newmarker=new google.maps.Marker({
        position: new google.maps.LatLng(-80,40), 
        map: map
});

以后可以添加诸如

之类的属性

newmarker.myattributes= { 
     type: 'Land/Lot',
     photos:20,
     address: '4710 Cedar Hill Ln Black Earth, WI'
     price: '$1,199,000'
     beds: 4,
     baths: 2,
     sqft: 4000
};

然后，如果你有一个onclick监听器，你可以访问这些属性:

google.maps.event.trigger(newmarker, 'click', function() {
    var newdiv=jQuery('<div id="property"></div>');
    newdiv.append('type :'+newmarker.myattributes.type);
    newdiv.append('photos :'+newmarker.myattributes.photos);
    newdiv.append('address :'+newmarker.myattributes.address);
    ...
    newdiv.appendTo('#container');
});

在这个例子中，我使用了一个新的div，但是你也可以在本地InfoWindow对象中插入标记字段。