之前一直用百度map，但如果是国外的项目就需要用google地图。由于在国内屏蔽了google地图的服务，因此调用的是一个国内地址(开发用)。这个地址没有用key，语言设置也还是中文的。
备注：网上很多国内的例子还是用v2的接口，差异还是很大的，v3的接口感觉更加接近js的风格，很多参数都直接是json。
例子中实现了google几个核心类的主要功能，包括：
1、在初始化时，定位到正向解析地址，这里是定位到自由女神像；
2、在地图中间位置初始化一个可拖拽的图标，绑定拖拽结束时间，结束后通过地址逆解析，弹出一个信息提示框；
3、在地图上绑定鼠标右击事件，每个右击事件新增一个图标；
4、在地图上绑定鼠标双击事件，双击后地图移动到初始位置（中间）；
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ditu.gdgdocs.org/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(function() {
initialize();
});
var map = null;
function initialize() {
var geocoder = new google.maps.Geocoder();
//地址正向解析
geocoder.geocode({
‘address‘: ‘Liberty Island, 10004 New York Harbor‘
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 12,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//定义标示
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: ‘location‘,
draggable: true
});
marker.setMap(map);
google.maps.event.addListener(marker, "dragend", function(event) {
//逆地址解析
geocoder.geocode({
‘location‘: event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var html = ‘<div>‘ + results[0].formatted_address + ‘</div>‘;
var infowindow = new google.maps.InfoWindow({
content: html
});
infowindow.open(map, marker);
}
});
//单击后在地图上增加一个标示
google.maps.event.addListener(map, ‘click‘, function(event) {
var marker1 = new google.maps.Marker({
map: map,
position: event.latLng
});
marker1.setMap(map);
});
//添加双击事件，返回地图中央
google.maps.event.addListener(map, "dblclick", function(evvent) {
var center = map.getCenter();
var lat = center.lat();
var lng = center.lng();
var latlng = new google.maps.LatLng(lat, lng);
map.setCenter(latlng);
})
});
}
});
}
</script>
</head>
<body>
<div style="width: 100%; float: left;">
<div style="width: 100%; height: 660px; border: 1px solid #C0C0C0;" id="map_canvas">
</div>
</div>
</body>
</html>
时间： 2024-10-20 18:13:50