GoogleMap api v3开发总结

项目描述：某快餐连锁在上海有11家分店，要求就是找到这11家分店的坐标，然后在地图上将其全部以自定义的图片方式显示出来，在鼠标移动到某个图片上显示这家店的具体地址。

1.取坐标。用Google地图，通过具体地址定位到一个店面，然后点击鼠标右键，选择"这是什么？"，就会在搜索框中显示这个点的坐标。

2.将坐标以图片的方式显示出来，只需要创建Marker即可。通常在initialize方法中创建Marker的形式如下

 

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(31.238637,121.467133);
    var myOptions = {
      zoom: 12,          
      center: latlng,    
      mapTypeId: google.maps.MapTypeId.ROADMAP,  
      disableDoubleClickZoom:false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   
    var image = 'http://www.supinfochina.com/ucenter/avatar.php?uid=23&size=small';  
    var myLatLng = new google.maps.LatLng(31.239311, 121.405159); 
    var beachMarker = new google.maps.Marker({       
	position: myLatLng,       
	map: map,  
	title:"上海市普陀区兰溪路137号曹杨商城4-5楼",
	icon: image   
    }); 
  }

这样显示一个图标没有问题。但是显示多个怎么办？把方法重复多次是不行的，我们可以把创建Marker的方法封装一下。在initializate中调用setMarkers(map, beaches);

 

var beaches = [
  ['上海市普陀区兰溪路137号曹杨商城4-5楼', 31.239311, 121.405159, 4],
  ['大兴街18号华联吉买盛内', 31.21354,121.488482, 5],
  ['陕西北路1622号2-3楼', 31.245205,121.439846, 14]
];
function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

3.美工给留了一个难题，把显示地图的部分做成了圆角矩形。还没见到那个地图应用是圆角的呢，愁坏我了。后来QQ群上的一个大哥出了个主意，可以用div+css，先画一个圆角的div，然后再设置地图容器的尺寸，就可以达到类似的效果了。

 

#map_canvas{
  width:911px; height:570px;
}
#contents{
    height: 570px;
    width: 911px;
    background-color: White;
    padding: 5px 5px 5px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(ie-css3.htc); /*ie-css3.htc与html文件在同一文件夹下*/
}

有人会问这个ie-css3.htc是什么文件。这是为了让IE6/IE7/IE8支持CSS3属性的脚本.

4.鼠标放到Marker标记上显示具体的地址。Marker有一个属性是title就是做这个工作的，只是这种title显示的方式不够醒目也不好看。可以使用InfoWindow来实现。和标记多个Marker一样，如果只是在setMarker方法后调用

 

var infowindow = new google.maps.InfoWindow({
        content: title
    });
    google.maps.event.addListener(marker, 'mouseover', function () {
        infowindow.open(map, marker);
    });

那样产生的效果是所有的Marker标记都得到了监听，但是鼠标移动到每个标记上都只是显示最后一个地址或者监听事件无效。老办法，封装。

 

function createMarker(myLatLng,map,title,index){
	var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: title,
        zIndex: index
    });
	var infowindow = new google.maps.InfoWindow({
        content: title
    });
    google.maps.event.addListener(marker, 'mouseover', function () {
        infowindow.open(map, marker);
    });
	google.maps.event.addListener(marker, 'mouseout', function () {
        infowindow.close();
    });
    return marker;
}

在setMarker的循环中调用var marker = createMarker(myLatLng,map,beach[0],beach[3]);即可。

PS:这是第一次使用GoogleMap做项目(虽然很小)，如果有说的不对的地方希望各位大神指正。

补充1：百度也能获取某个点的坐标，坑爹啊。以前不知道，找87家店的坐标就耗了1天的时间。http://dev.baidu.com/wiki/static/map/API/tool/getPoint/

补充2：使用百度地图API开发参考示例http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html