如何使用Google Map API for Web？

Question

我是新手对于Google Map API，所以我不知道如何使用它。

所以我想要一些指导或参考链接来处理它。

需要：

我在地图上有一个位置，我想显示一些自定义标记，例如学校，医院等。

我有学校，医院等标签。

当我点击学校然后在2公里（知识管理下拉列表）显示我所在位置周围的所有学校，当悬停或点击特定学校时，它会自动告诉我们距离我的位置有多远。

图像像这样：

我已阅读谷歌地图参考链接：

https://developers.google.com/maps/web/

但我很困惑。所以请提供一些建议和有用的链接。

另一张图片：

Answer 1

我为你创建了一个工作示例。要获取当前位置，请按Get My Location，然后使用HTML5地理位置API获取坐标，google.maps.Geocoder将这些坐标转换为地址。按Show Locations In Radius在地图上显示半径，并仅显示半径范围内的标记。此函数使用各种Google地图API调用来绘制半径（google.maps.Circle），标记（google.maps.Marker - 读取API，如果您想了解有关自定义样式的更多信息），Geocoder以及{{1以米为单位计算两个位置之间的距离。该示例使用虚拟位置数据google.maps.geometry.spherical.computeDistanceBetween（这些只是纽约第二街的示例标记），您可以用数据替换它们。单击标记时，它将显示距输入位置的距离（以米为单位）。要查看示例位置，请输入＆＃34; Second Steet，New York＆＃34;作为地址。 （获取我的位置无法在代码段iframe中工作，您必须在您的本地主机上试用）

＆＃13;

＆＃13;

all_locations

＆＃13;

var map = null;
  var radius_circle = null;
  var markers_on_map = [];
  var geocoder = null;
  var infowindow = null;
  
  //all_locations is just a sample, you will probably load those from database
  var all_locations = [
	  {type: "restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340},
	  {type: "school", name: "School 1", lat: 40.724705, lng: -73.986611},
	  {type: "school", name: "School 2", lat: 40.724165, lng: -73.983883},
	  {type: "restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358},
	  {type: "school", name: "School 3", lat: 40.732056, lng: -73.998683}
  ];

  //initialize map on document ready
  $(document).ready(function(){
      var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
      var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  geocoder = new google.maps.Geocoder();
      google.maps.event.addListener(map, 'click', function(){
           if(infowindow){
             infowindow.setMap(null);
             infowindow = null;
           }
      });
      $('#location_type').change(function(){
         if(radius_circle) showCloseLocations();
      });
  });
  
  function showCloseLocations() {
  	var i;
  	var radius_km = $('#radius_km').val();
  	var address = $('#address').val();
    var location_type = $('#location_type').val();

  	//remove all radii and markers from map before displaying new ones
  	if (radius_circle) {
  		radius_circle.setMap(null);
  		radius_circle = null;
  	}
  	for (i = 0; i < markers_on_map.length; i++) {
  		if (markers_on_map[i]) {
  			markers_on_map[i].setMap(null);
  			markers_on_map[i] = null;
  		}
  	}

  	if (geocoder) {
  		geocoder.geocode({'address': address}, function (results, status) {
  			if (status == google.maps.GeocoderStatus.OK) {
  				if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
  					var address_lat_lng = results[0].geometry.location;
  					radius_circle = new google.maps.Circle({
  						center: address_lat_lng,
  						radius: radius_km * 1000,
  						clickable: false,
						map: map
  					});
                    if (radius_circle) map.fitBounds(radius_circle.getBounds());
  					for (var j = 0; j < all_locations.length; j++) {
  						(function (location) {
  							var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
  							var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
  							if (location_type == location.type && distance_from_location <= radius_km * 1000) {
  								var new_marker = new google.maps.Marker({
  									position: marker_lat_lng,
  									map: map,
  									title: location.name
  								});      								google.maps.event.addListener(new_marker, 'click', function () {
                                    if(infowindow){
             infowindow.setMap(null);
             infowindow = null;
           }
  									infowindow = new google.maps.InfoWindow(
            { content: '<div style="color:red">'+location.name +'</div>' + " is " + distance_from_location + " meters from my location",
              size: new google.maps.Size(150,50),
              pixelOffset: new google.maps.Size(0, -30)
            , position: marker_lat_lng, map: map});
  								});
  								markers_on_map.push(new_marker);
  							}
  						})(all_locations[j]);
  					}
  				} else {
  					alert("No results found while geocoding!");
  				}
  			} else {
  				alert("Geocode was not successful: " + status);
  			}
  		});
  	}
  }
  
  function getMyAdress() {
  	if (navigator.geolocation) {
  		navigator.geolocation.getCurrentPosition(function (position) {
  			geocoder.geocode({latLng: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)}, function (results, status) {
  				if (status == google.maps.GeocoderStatus.OK) {
  					if (results[0]) {
  						$('#address').val(results[0].formatted_address);
  					} else {
  						alert("No results found");
  					}
  				} else {
  					alert("Geocode was not successful for the following reason: " + status);
  				}
  			});
  		}, function () {
  			alert("Unable to find my location!");
  		});
  	}
  }

＆＃13;

＆＃13;

＆＃13;