javascript – Google Maps v3通过jQuery $.ajax和json添加标记

前端之家收集整理的这篇文章主要介绍了javascript – Google Maps v3通过jQuery $.ajax和json添加标记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有问题是使用 jquery将地图标记添加到gmaps.到目前为止,这是我的代码.

现在,我得到的错误是Uncaught ReferenceError:未定义GLatLng

地图加载正常,正在获取和解析json数据…从我可以告诉…;)

添加地图引脚/标记或w / e你称之为em …

  1. EventsModel.prototype.fetchMapPoints = function()
  2. {
  3. $.ajax({
  4. dataType: "json",url: '../../events/map',success: eventsV.writeMapPoints
  5. });
  6. }
  7.  
  8. EventsView.prototype.writeMapPoints = function(Locations)
  9. {
  10. if (Locations.length>0) {
  11. for (i=0; i<Locations.length; i++) {
  12. var location = Locations[i];
  13. eventsV.addMapPin(location);
  14. }
  15. //zoomToBounds();
  16. }
  17. }
  18.  
  19. EventsView.prototype.addMapPin = function(location)
  20. {
  21. var point = new GLatLng(location.lat,location.lng);
  22. var marker = new GMarker(point);
  23. map.addOverlay(marker);
  24. bounds.extend(marker.getPoint());
  25. $("<li />")
  26. .html(location.name)
  27. .click(function(){
  28. showMessage(marker,location.name);
  29. })
  30. .appendTo("#list");
  31. GEvent.addListener(marker,"click",function(){
  32. showMessage(this);
  33. });
  34.  
  35. }

地图初始化

  1. EventsModel.prototype.fetchGmapScript = function()
  2. {
  3. var script = document.createElement("script");
  4. script.type = "text/javascript";
  5. script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=eventsV.initializeMap";
  6. document.body.appendChild(script);
  7. }
  8.  
  9. EventsView.prototype.initializeMap = function()
  10. {
  11. var myLatlng = new google.maps.LatLng(coords.lat,coords.long);
  12. var myOptions = {
  13. zoom: 13,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP
  14. }
  15. map = new google.maps.Map(document.getElementById("Map"),myOptions);
  16. }

这是json数据的样子

  1. [{"Event":"c16a5320fa475530d9583c34fd356ef5","lat":"37.8966942","lng":"-122.0599376","Image":"321752348.png","name":"Winning apple store","Description":""},{"Event":"b6d767d2f8ed5d21a44b0e5886680cb9","lat":"37.8995050","lng":"-122.0619770","Image":"","name":"Koreana Kitchen","Description":"Peter isn't invited!"}]

解决方法

就像错误说的那样,GLatLng没有定义. GLatLng来自Google Maps API的第2版,但您使用的是版本3,因此将其更改为google.maps.LatLng至少应该将其排除在外.

猜你在找的Ajax相关文章