Question

我正在使用Asp.net和谷歌地图api。在站点地图上可以看到一些字段。当用户输入指定的地址和半径时，我可以获得在此位置购物的列表od（使用webservice）。我是在服务器端做的。现在我想在谷歌地图上显示结果。

最好的方法是什么？任何scropt装载机或类似的东西？

Answer 1

您可以将标记列表输出到数组中的html中，然后使用类似的内容将其添加到地图中（未经测试但不远）：

var gMarkers = [['place1', 55.8, -4.020508],['place2', 53.3, -7.61],['place3', 57.9, -8.12]];

for (var i = 0; i < gMarkers.length; i++) {
   var marker =  new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lon),
                    map: map
                });

}

您还可以使用jQuery向Web服务发出请求。如果您的Web服务返回XML，那么有jQuery插件可以帮助您解析客户端的数据，但Json是更好的选择。

您是否正在使用ajax在页面中添加注入html，或者您是否在用户输入地址后使用回发来重新加载页面？

Answer 2

试试这个

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Google Map Demo
    </title>
</head>
<body>
    <div id="MyDivScrolling">
        <div>
            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC8KY7rkZP7Xyq5oVM0nssUc4OPIP7MQtw&callback=initMap"></script>
            <script type="text/javascript">
                var markers = [{
                "title": 'Havana',
                "lat": '23.1330200',
                "lng": '-82.3830400',
                "description": 'José Martí International Airport, Havana'
            }
		,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport, Tampa'
			 }

		,
		   {
		       "title": 'Havana',
		       "lat": '23.1330200',
		       "lng": '-82.3830400',
		       "description": 'José Martí International Airport, Havana'
		   }
		,
		     {
		         "title": 'Orlando',
		         "lat": '28.538336',
		         "lng": ' -81.379234',
		         "description": 'Orlando International Airport, Orlando'
		     }
	    ,
		    {
		        "title": 'Havana',
		        "lat": '23.1330200',
		        "lng": '-82.3830400',
		        "description": 'José Martí International Airport, Havana'
		    }
		,
            {
                "title": 'Miami',
                "lat": '25.7742700',
                "lng": '-80.1936600',
                "description": 'Miami International Airport, Miami'
            }
        ,
            {
                "title": 'Havana',
                "lat": '23.1330200',
                "lng": '-82.3830400',
                "description": 'José Martí International Airport, Havana'
            }
          ,
		    {
		        "title": 'Miami',
		        "lat": '25.7742700',
		        "lng": '-80.1936600',
		        "description": 'Miami International Airport, Miami'
		    }
		,
            {
                "title": 'Camagüey-Ignacio Agramonte',
                "lat": '21.416666666667',
                "lng": '-77.866666666667 ',
                "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
            }

            ,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport'
			 }
             ,
              {
                  "title": 'Camagüey-Ignacio Agramonte',
                  "lat": '21.416666666667',
                  "lng": '-77.866666666667 ',
                  "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
              }
               ,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport, Tampa'
			 }];
                window.onload = function () {
                    var mapOptions = {
                        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                        zoom: 9,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    };
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var infoWindow = new google.maps.InfoWindow();
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < markers.length; i++) {
                        var data = markers[i]
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                        lat_lng.push(myLatlng);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title: data.title
                        });
                        latlngbounds.extend(marker.position);
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.description);
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                    }
                    map.setCenter(latlngbounds.getCenter());
                    map.fitBounds(latlngbounds);

                    //***********ROUTING****************//

                    //Intialize the Path Array
                    var path = new google.maps.MVCArray();

                    //Intialize the Direction Service
                    var service = new google.maps.DirectionsService();

                    //Set the Path Stroke Color
                    var poly = new google.maps.Polyline({ map: map, strokeColor: '#DC143C' });

                    //Loop and Draw Path Route between the Points on MAP
                    for (var i = 0; i < lat_lng.length; i++) {
                        if ((i + 1) < lat_lng.length) {
                            var src = lat_lng[i];
                            var des = lat_lng[i + 1];
                            path.push(src);
                            poly.setPath(path);
                            service.route({
                                origin: src,
                                destination: des,
                                travelMode: google.maps.DirectionsTravelMode.DRIVING
                            }, function (result, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                        path.push(result.routes[0].overview_path[i]);
                                    }
                                }
                            });
                        }
                    }
                }
            </script>
            <div class="MainSliderItem2 ImagesContainerItem">
                <div id="dvMap" style="width: 100%;height: 490px;position: relative;overflow: hidden;background-color: rgb(229, 227, 223);max-width: 80%;margin: 98px auto;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

asp.net + google maps api，为网站添加标记

2 个答案: