使用Google maps的问题

最新推荐文章于 2025-11-12 11:51:58 发布

原创最新推荐文章于 2025-11-12 11:51:58 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #function #callback #distance #border #xhtml

问题困惑专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Google地图API实现地图加载、位置标记及两点间距离计算的方法，并提供了一个具体的示例代码。

2010-02-05 11:32

在IE下偶尔报错，火狐里没事。。。郁闷。。。

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=gbk"/>
    <title>goole地图调用</title>
    <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false&oe=gbk"
            type="text/javascript"></script> 
   <script type="text/javascript">
    var map;
var geocoder;
var address;
var markerOptions;
var markerOptions2;
var marker;
var friends;
var EARTH_RADIUS = 6378.137;
var distance;
var center="";
var lat1,lng1,lat2,lng2,j=0;

//获取元素节点
function $(id){
return document.getElementById(id);
}

//自定义初始化方法，完成地图的加载
function initialize(){
      if (GBrowserIsCompatible()) { //判断浏览器是否支持
        map = new GMap2($("map")); //new 一个地图对象
   geocoder = new GClientGeocoder();//它的getLatLng()方法可以解析地名为经纬度，通过2点的经纬度可以连线，算距离等
// map.addControl(new GSmallMapControl()); //拖动地图的控件
   map.addControl(new GLargeMapControl());
   map.addControl(new GOverviewMapControl());
//用于设置自己的标记选项
var icon = new GIcon(); //图片对象
icon.image = "flag.jpg"; //设置该对象的图片
icon.iconAnchor = new GPoint(0, 20); //图片相对于定点的距离    靠左靠上
icon.infoWindowAnchor = new GPoint(0, 10); //信息框相对于定点的距离   靠右靠下

markerOptions = {icon:icon}; //标记选项构造GMaker对象时可以应用上对标记的一些设置 marker = new GMarker(new GLatLng(100,200),markerOptions)

//用于设置好友的标记选项
var icon2 = new GIcon();
icon2.image = "home.jpg";
icon2.iconAnchor = new GPoint(0, 20);
icon2.infoWindowAnchor = new GPoint(0, 10);

markerOptions2 = {icon:icon2};

//自己地址
address= $("home").value;//获取表单值
geocoder.getLatLng(address,callback_home);//通过地名获取经纬度，将结果返回给回调方法，返回类型为GLatLng

//好友地址
friends=$("friend").value.split(",");//地址数组
for(var i=0;i<friends.length;i++){
geocoder.getLatLng(friends[i],callback_friends);
}

}
}

//处理自己地址
function callback_home(point){
　if (point==null) {
　　alert("无法解析:" + address);
　　} else {
　　map.setCenter(point, 4);//设置地图视图中心点

//alert(point instanceof GLatLng); //为TRUE

//alert(point.constructor==GLatLng);
center=point;

　　marker = new GMarker(point,markerOptions2);//new 标记对象
//markerOptions.image="home.jpg";
//marker.setImage("home.jpg");
　 map.addOverlay(marker);//将标记放到地图上

//给标记绑定一个click事件事件里可以完成显示用户信息的操作可以使用document.createElement("div")等创建任何html元素

//marker.bindInfoWindow(mydiv);

marker.bindInfoWindowHtml(address+" "+marker.getLatLng().toString());
}

}

//处理好友地址
function callback_friends(point){

　　if (point==null) {
　　alert("无法解析该地址:"+friends[j]);
　　} else {

　　 marker = new GMarker(point,markerOptions);
    var polyline = new GPolyline([center, marker.getLatLng()]); //产生线的对象 2个经纬度
var GPolyStyleOptions = { opacity:1,color:"blue",weight:2};//线的一些设置，透明度，颜色，粗细

polyline.setStrokeStyle(GPolyStyleOptions);//应用设置
    map.addOverlay(polyline);//将线放到地图上

marker.bindInfoWindowHtml(friends[j]+" "+marker.getLatLng().toString());//为标记绑定click 事件
//GEvent.addListener(marker, "click", function() {

    // marker.openInfoWindowHtml(marker.getLatLng().toString());
//});
map.addOverlay(marker);//把标记放到地图上

//------------------------测距离-------------
   lat1=center.lat();//对象不支持吗？
   lng1=center.lng();
   lat2=marker.getLatLng().lat();
   lng2=marker.getLatLng().lng();
   distance=getDistance(lat1,lng1,lat2,lng2);
   $("direction").innerHTML += address+"至"+friends[j]+"的距离为："+distance+" Km<br>";
    j++;
　　}

}

//google maps中通过两点经纬度，计算两点间距离算法

function rad(d)
{
return d * Math.PI / 180.0;
}

function getDistance( lat1, lng1, lat2, lng2)
{
      var radLat1 = rad(lat1);
      var radLat2 = rad(lat2);
      var a = radLat1 - radLat2;
      var b = rad(lng1) - rad(lng2)
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
      Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
      s = s * EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;

   return s;
}

//function onGDirectionsLoad(){
// alert(dir.getDistance().meters);
//      $("status").innerHTML = dir.getStatus().code;
//}
</script>

</head>
<body onload="initialize()" onunload="GUnload()">
     <div id="direction" style="border: 1px solid;width: 400px;"></div>
     <div id="map"       style="border: 1px solid;width: 500px; height: 400px;"></div>

    <input id="home" value="长沙市" type="hidden">
<input id="friend" value="天津市,西安市,台北市,昆明市,海口市" type="hidden">
</body>
</html>