众果搜的博客

脚踏大地,仰望星空,致力于财经投资网站导航与在线网络工具的开发与普及

Search(博客搜索)

热文排行

最近发表

最新评论及回复

« 如果你还在骂莎朗,看看韩寒这篇博文 夏天来了,游泳注意安全 »

谷歌地图自定义图标事件响应

Google地图API中允许自定义图标来在地图上做标记,形成自己的marker,同默认的加以区别。下面的代码示例比较完整,注意icon的事件定义。

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  createMarker(new GPoint(bounds.minX + width * Math.random(),
                          bounds.minY + height * Math.random()));
}

地图上线段宽度和颜色的调整使用下面的代码:
  me.map_.addOverlay(new GPolyline([newMarker.getLatLng(),markerWen.getLatLng()],"#0000ff", 2));
 其中,#0000ff为Google地图为线段提供的默认值,你可以修改为其他颜色16进制值。2为两个象素的宽度。如果你只是想调整折线或者线段的宽度,保留默认颜色值,这里必须填入#0000ff。

当想在地图上加入路线时,就是多折线线段,必须定义路线经过的点,形成一个坐标数组,然后通过此坐标数组产生一个路线。如下所示:
  var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4419, -122.1319),
  new GLatLng(37.4519, -122.1319),
  new GLatLng(37.4519, -122.1219),
  new GLatLng(37.4619, -122.1219)
  ], "#FF0000", 10);
  map.addOverlay(polyline); 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80722 Code detection by Codefense

Copyright www.zhongguosou.com. Some Rights Reserved.微信号:MiZhiHeiGeTaXiaoMi