Jump to content

problems with using google maps api

zxsz4084

By zxsz4084
in Javascript Help

Recommended Posts

zxsz4084 Newbie

zxsz4084

Posted
Posted

sometimes does not work well  in IE,but ok in firefox.I do not know why ,is there a kind man help me ?

errors at line " lat1=center.lat();" says object does not the field or method. but I have used  "alert(point instanceof GLatLng);" show it is a GLatLng object.I don't konw why...  I'm new here,more help want to be given! Thank you!  :P

 

 

<!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> <!--引用Google地图js 密匙key 放到公网上要根据应用网址申请一个-->
   <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.constructor==GLatLng);
    center=point;// ie里报 center为空或不是对象。。。。。。。。。。。。。。。。

　　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 {
//alert(point instanceof GLatLng);
　　 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>

Link to comment
https://forums.phpfreaks.com/topic/191000-problems-with-using-google-maps-api/
Share on other sites
zxsz4084 Newbie

zxsz4084

Posted
  • Author
Posted

This may sees a litttle good!

<!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 map</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")); 
	geocoder = new GClientGeocoder();

	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl());

address= $("home").value;
geocoder.getLatLng(address,callback_home);


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("cannot resolve:" + address);
　　} else {
　　map.setCenter(point, 2);
//alert(point.constructor==GLatLng);
    center=point;
　　marker = new GMarker(point);
　  map.addOverlay(marker);

marker.bindInfoWindowHtml(address+" "+marker.getLatLng().toString());
}
}
  
function callback_friends(point){

　　if (point==null) {
　　alert("cannot resolve:"+friends[j]);
　　} else {
//alert(point instanceof GLatLng);
　　 marker = new GMarker(point);
    var polyline = new GPolyline([center, marker.getLatLng()]); 
var GPolyStyleOptions = { opacity:1,color:"blue",weight:2};

polyline.setStrokeStyle(GPolyStyleOptions);
    map.addOverlay(polyline);
   
marker.bindInfoWindowHtml(friends[j]+" "+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+" to "+friends[j]+"'s distance："+distance+" Km<br>";
   j++;
　　}
}

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;
}
</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="China" type="hidden">
<input id="friend" value="Janpan,Australia,Russia,India" type="hidden">
  </body> 
</html>

 

[attachment deleted by admin]

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.