GOOGLE MAP 深入之 如何给地图更换显示标记图标
1、// This example adds a marker to indicate the position
// of Bondi Beach in Sydney, Australia
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
2、 var image = 'images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
设置要显示标记图标的路径及标记图标在地图上显示的位置
3、var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
在 google.maps.Marker 里面,新增了 icon 属性,用来传入要显示标记图标的路径.
4、当然,也可以显示多个自定义的标记图标.
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2)
}
var map = new google.maps.Map(document.getElementById('map-canvas')mapOptions); setMarkers(map, beaches);
}var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
url: 'images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(20, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
}; // Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
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,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
5、代码解析:
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
显示多个自定义的标记图标,主要是要我们自定义一个关于经纬度及提示内容的数组.加入到 title 及 position 里面就能实现.
6、对于我们国内的开发者来说,现在访问谷歌不是一件容易的事情,这里我也只能给你们提供一些自己的小经验,还是推荐大家用百度的地图,在中国稳定性和可访问性是不需要担心的,至于百度地图效果怎么样,在后面我也会跟大家分享我的一些心得体会.
如果你们有自己的一些问题我这里没有讲解到的,可以在下面进行提问.我会及时给大家解答.