GoogleMap的鼠标点击标注、搜索和设置城市的简单应用

资源

Google Map API包含了大量的文档、示例和各种资料。在使用前需要申请自己的密钥

墙内要用：http://maps.google.cn/maps/api/js？

墙外可用：https://maps.googleapis.com/maps/api/js?

初始化地图

var cn = {lat: 39.88892859714545, lng: 116.40975952148438};
var mapDiv = document.getElementById('form_map');
map = new google.maps.Map(mapDiv, {
  center: cn,
  zoom: 15,
  mapTypeId: 'roadmap'
});
map.addListener('click', function(e) {
  placeMarker(e.latLng, map);
});

上面的代码就初始化了一个地图，并且监听了鼠标点击事件。

鼠标点击

function placeMarkerAndPanTo(latLng, map) {
    $("#form_map_x").val(latLng.lat());
    $("#form_map_y").val(latLng.lng());
    //clear old marker
    if(marker!=null){
      marker.setMap(null);
      marker = null;
    }
    //show new marker
    marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: '/image/poi_custom.png'
    });
    //map.panTo(latLng);//mpa change center
}

相应鼠标点击事件，先清除旧标记，再添加一个新的标注，并且把经纬度输出input表单里。

地图搜索

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

地图响应一个input表单的输入内容，改变地图的中心，并设置搜索地点的标注

改变国家和城市

经常需要设置地图显示某个国家的某个城市，而不是根据具体的经纬度设置地图的中心。

用以下代码可以改变地图的国家和城市

geocoder.geocode({'address': '北京, 中国'}, function(results, status) {
  if (status === 'OK') {
      map.setCenter(results[0].geometry.location);
  }
});

本文的具体例子在这里