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