google 地图IE,火狐显示问题(在ie中点击美食显示不出来 在火狐中显示正常)

sunyujun 发布于 2012/09/13 18:27
阅读 1K+
收藏 0
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>靠港 美食</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/gmap3.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=AIzaSyBppH0It4UMa-nPn1yg5NTKJiecHbsUk7s"></script>
<script src="js/ad.js" type="text/javascript"></script>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.ip-look-up.com/Services/ipInfo.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>


<SCRIPT language=JScript event=OnObjectReady(objObject,objAsyncContext) for=foo>
if(objObject.IPEnabled != null && objObject.IPEnabled != "undefined" && objObject.IPEnabled == true)
{
    if(objObject.MACAddress != null && objObject.MACAddress != "undefined")
        MACAddr = objObject.MACAddress;
    if(objObject.IPEnabled && objObject.IPAddress(0) != null && objObject.IPAddress(0) != "undefined")
        IPAddr = objObject.IPAddress(0);
    if(objObject.DNSHostName != null && objObject.DNSHostName != "undefined")
        sDNSName = objObject.DNSHostName
}
</SCRIPT>

<script type="text/javascript">
var geocoder; //定义一个Geocoder对象
var map;        //定义一个Map对象
var infowindow = new google.maps.InfoWindow();    //初始化一个信息窗口,用来显示提示信息

//定义导航组件
var boxpolys = null;        //保存路线的数组
//var directions = null;
var routeBoxer = null;    //RouteBoxer对象
var distance = null; // km



//初始化一个最简单的地图
function initialize() {
    //创建Geocoder对象,该对象是实现地址和经纬度的转换
    geocoder = new google.maps.Geocoder();
    //实例化LatLng,LatLng是标注经纬度的对象,用它来控制地图中心显示的坐标
    //纬度介于-90 度和+90度,经度将被介于-180度和180度
    //ipLocation.latitude, ipLocation.longitude 外部插件根据ip获取经纬度
    var latlng = new google.maps.LatLng(39.9493, 116.3975);
    //定义MapOptions对象属性
    var myOptions = {
zoom: 14,            //地图缩放级别
      center: latlng,    //中心点坐标
      mapTypeId: google.maps.MapTypeId.ROADMAP,    //地图显示的类型。有地图(ROADMAP)、卫星(SATELLITE)、混合(HYBRID)、地形(TERRAIN)四种类型
      disableDoubleClickZoom:true
          //还有其它属性见api中
    }
    //创建地图。构造器中有两个参数。第一个参数是显示层div的对象。第二个参数是myOptions
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    codeEvent();    //调用下面定义的事件处理

    //导航组件初始化
    routeBoxer = new RouteBoxer();
    directionService = new google.maps.DirectionsService();
    directionsRenderer = new google.maps.DirectionsRenderer({ map: map });

}

//根据地址查找。并且查找的结果显示在中心并且标记
function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
        /*Geocoder只有一个方法geocode
          第一个参数: GeocoderRequest,有五个可配置参数address、bounds、language、location、region
          第二个参数:回调方法(GeocoderResult对象[数组],GeocoderStatus对象)
          GeocoderResult:以json格式表示的geocode结果集,有三个属性{
          address_components:GeocoderAddressComponent对象的数组
          geometry:GeocoderGeometry 对象 {
          bounds:LatLngBounds 对象
          location:LatLng 对象
          location_type:GeocoderLocationType 对象
          viewport:       LatLngBounds 对象
          }
          types:一个字符串的数组,为一个地理位置的唯一标示
          }
          GeocoderStatus 定义了geocode()返回的7个状态
         */
        geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                //results[0].geometry.location 根据上面的注释可以知道 这里是通过搜索地址来获得经纬度
                map.setCenter(results[0].geometry.location);
                /*
                   Marker类:给地图显示标记。参数为 MarkerOptions。共有12个属性。其中position属性为必须配置的。
                 */
                var marker = new google.maps.Marker({
map: map,                                 //定义在map中显示标记。
position: results[0].geometry.location    //定义标记的位置
});
                infowindow.setContent(address);     //设置信息的内容
                infowindow.open(map, marker);    //打开信息窗口。一般与map和标记关联
                } else {
                alert("Geocode was not successful for the following reason: " + status);
                }
                });
}
}
//估计搜索查找
function codeAddressa(ss) {
    var address =  ss ;
    if (geocoder) {
        /*Geocoder只有一个方法geocode
          第一个参数: GeocoderRequest,有五个可配置参数address、bounds、language、location、region
          第二个参数:回调方法(GeocoderResult对象[数组],GeocoderStatus对象)
          GeocoderResult:以json格式表示的geocode结果集,有三个属性{
          address_components:GeocoderAddressComponent对象的数组
          geometry:GeocoderGeometry 对象 {
          bounds:LatLngBounds 对象
          location:LatLng 对象
          location_type:GeocoderLocationType 对象
          viewport:       LatLngBounds 对象
          }
          types:一个字符串的数组,为一个地理位置的唯一标示
          }
          GeocoderStatus 定义了geocode()返回的7个状态
         */
        geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                //results[0].geometry.location 根据上面的注释可以知道 这里是通过搜索地址来获得经纬度
                map.setCenter(results[0].geometry.location);
                /*
                   Marker类:给地图显示标记。参数为 MarkerOptions。共有12个属性。其中position属性为必须配置的。
                 */
                var marker = new google.maps.Marker({
                                    map: map,                                 //定义在map中显示标记。
                                    position: results[0].geometry.location    //定义标记的位置
                                });
                infowindow.setContent(address);     //设置信息的内容
                infowindow.open(map, marker);    //打开信息窗口。一般与map和标记关联
                } else {
                alert("Geocode was not successful for the following reason: " + status);
                }
                });
}
}



//根据经纬度查找中心点。并且显示中心点的信息
function codeLatLng() {
    //var input = document.getElementById("latlng").value;
    /*对经纬度进行处理*/
    var input = "39.92,116.46";
    var latlngStr = input.split(",",2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);    //根据经纬度创建LatLng
    if (geocoder) {
        geocoder.geocode({'latLng': latlng}, function(results, status) {    //根据经纬度查找地理位置
                if (status == google.maps.GeocoderStatus.OK) {    //判断查找状态
                if (results[1]) {                                //查找成功
                map.setZoom(11);    //设置zoom
                marker = new google.maps.Marker({    //添加标记
position: latlng,
map: map
});
                /*
                   InfoWindow 信息窗口类。显示标记位置的信息
                 */
                infowindow.setContent(results[1].formatted_address);     //设置信息的内容
                infowindow.open(map, marker);    //打开信息窗口。一般与map和标记关联
                }
                } else {
                alert("Geocoder failed due to: " + status);
                }
                });
}
}




//事件处理
function codeEvent() {
    //双击
    google.maps.event.addListener(map,'dblclick',function(event){
            map.setCenter(event.latLng);
            var marker = new google.maps.Marker({//双击的时候给个标记,并显示个信息
map: map,                              
position: event.latLng,    //注意此处,获取标记的经纬度的方法
zIndex:1,
draggable:true,
title:'my tag'
});
            infowindow.setContent('my home');
            infowindow.open(map, marker);
            });
//鼠标移动
google.maps.event.addListener(map,'mouseover',function(){
        //alert("run mouseover");
        });
}

//导航处理
function route() {
    // Clear any previous route boxes from the map
    clearBoxes();

    // Convert the distance to box around the route from miles to km
    distance = parseFloat(400) * 1.609344;

    /**
      DirectionsRequest 对象 一共有10个可配置参数
      导航DirectionService.route方法必须的参数对象 有三个必须配置的属性:开始地点、目的地,导航类型
     */
    var request = {
origin: document.getElementById("from").value,            //开始地点 可以为地点名或者LatLng对象
        destination: document.getElementById("to").value,        //目的地   可以为地点名或者LatLng对象
        provideRouteAlternatives: true,                            //是否提供替代路线 可选参数
        travelMode: google.maps.DirectionsTravelMode.DRIVING    //导航类型 BICYCLING(自行车方式)、DRIVING(驾车)、WALKING(自定义)
    }

    /*导航方法。参数为DirectionsRequest 和一个回调函数
      其中回调函数的参数为
      1、DirectionsResult 只有一个属性 DirectionsRoute[]对象数组。
      当DirectionsRequest 中的provideRouteAlternatives 设置为true 时有多个数据集,否则数组的长度为1
      2、DirectionsStatus
     */
    directionService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(result); 
            alert("共有 " + result.routes.length + " 种导航方案");
            /*DirectionsRoute 对象    导航路线的对象

             */
            var path = result.routes[0].overview_path; //返回 DirectionsRoute 对象
            var boxes = routeBoxer.box(path, distance); //通过 routeBoxer对象画出路线图
            drawBoxes(boxes);
            } else {
            alert("Directions query failed: " + status);
            }
            });
}



// 描路线的方法
function drawBoxes(boxes) {
    boxpolys = new Array(boxes.length);
    for (var i = 0; i < boxes.length; i++) {
        // alert(boxes[i]);
        //画矩形点描出路径
        boxpolys[i] = new google.maps.Rectangle({    //构造器的参数 RectangleOptions类型
                /*
RectangleOptions:共9个可配置参数 详细见API

                 */
bounds: boxes[i],        //LatLngBounds 对象,描点的位置
fillOpacity: 0,        //背景的不透明度 0为透明
strokeOpacity: 0.5,    //导航线的透明度 0为透明
strokeColor: '#000000',    //背景颜色
strokeWeight: 1,        //宽度
map: map
});
}
}

// 清除路线缓存
function clearBoxes() {
    if (boxpolys != null) {
        for (var i = 0; i < boxpolys.length; i++) {
            boxpolys[i].setMap(null);
        }
    }
    boxpolys = null;
}
</script>
<script>
//方法二
google.load('search','1');
var localSearch;
var GEvent;
function searchComplete(){
    if(localSearch.results && localSearch.results.length>0){
        for(var i=0;i<localSearch.results.length;i++){
            var lr = localSearch.results[i];
                       //如果你要在你的地图内标记,那么下边的三行你可以删掉,换成用地址在地图标记的代码就行了.
var address = lr.region+lr.city+lr.streetAddress;
    if (geocoder) {
        /*Geocoder只有一个方法geocode
          第一个参数: GeocoderRequest,有五个可配置参数address、bounds、language、location、region
          第二个参数:回调方法(GeocoderResult对象[数组],GeocoderStatus对象)
          GeocoderResult:以json格式表示的geocode结果集,有三个属性{
          address_components:GeocoderAddressComponent对象的数组
          geometry:GeocoderGeometry 对象 {
          bounds:LatLngBounds 对象
          location:LatLng 对象
          location_type:GeocoderLocationType 对象
          viewport:       LatLngBounds 对象
          }
          types:一个字符串的数组,为一个地理位置的唯一标示
          }
          GeocoderStatus 定义了geocode()返回的7个状态
         */
        geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                //results[0].geometry.location 根据上面的注释可以知道 这里是通过搜索地址来获得经纬度
                map.setCenter(results[0].geometry.location);
                /*
                   Marker类:给地图显示标记。参数为 MarkerOptions。共有12个属性。其中position属性为必须配置的。
                 */
                var marker = new google.maps.Marker({
map: map,                                 //定义在map中显示标记。
position: results[0].geometry.location    //定义标记的位置
});
                  GEvent.addListener(pointmarker, "click", function(point) {
                    var myHtml= lr.title+'<br>'+address;
                    parent.map.openInfoWindowHtml(point, myHtml);
                    });

//                infowindow.setContent(lr.title+'<br>'+address);     //设置信息的内容
 //               infowindow.open(map, marker);    //打开信息窗口。一般与map和标记关联
                } else {
               // alert("Geocode was not successful for the following reason: " + status);
                }
                });
}


          var a = document.createElement('a');
        a.innerHTML = "<br><a href='"+lr.url+"' target='_blank'>"+lr.title+"</a><br>地址:"+lr.region+" "+lr.city+" "+lr.streetAddress+"<br>";
       var node =  document.getElementById("map_content_a");
        node.parentNode.appendChild(a);
        }
    }
}

function meishi(){
    var address = document.getElementById("address").value;
    var zhou = $("#port").text();
    localSearch = new google.search.LocalSearch();
    localSearch.setCenterPoint(address);

    //搜索完之後的回調函數
    localSearch.setSearchCompleteCallback(this,searchComplete,null);
    localSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

    //要搜索的關鍵字
    localSearch.execute("zhou");
}

//入口
google.setOnLoadCallback("onLoad");
</script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('div, ul, img, li, input , a , dl , dt , dd,span');
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

<link href="themes/default/style/style2.css" rel="stylesheet" type="text/css" />
</head>
<body onload="initialize()">
<div class="content">
<!--头部-->
    <!-- #BeginLibraryItem "/library/page_header_o.lbi" --><!-- #EndLibraryItem -->
 <!---头部 end--->

<!--头部-->
    <!-- #BeginLibraryItem "/library/page_redian.lbi" --><!-- #EndLibraryItem -->
 <!---头部 end--->

  <div class="content_b s_d">
    <div class="place">
      您的位置:&nbsp;<a href="index.php">首页</a>&nbsp;&nbsp;>&nbsp;&nbsp;<a href="hyport.php">靠港</a>&nbsp;&nbsp;>&nbsp;&nbsp;美食
    </div>
  </div>
  <div class="content_b">

 <script type="text/javascript">
  function fn_city(data){
      var html = '';
      for(i in data){
          var n = (data[i].region_id);
          var d = (data[i].region_name);
          $("#c_city").empty();

          if(n){
              //$('<a href="#" class="ch_city" jsinstance="' + n + '">' + d + '</a>').appendTo(".amongs2");
              html +='<a href="#" class="ch_city" jsinstance="' +n + '">';
              html +=d;
              html +='</a>';
          }
      }
      return html;

  }

$(function(){
        //省
        $("#z_city").click(function(){
            var city = $(this).attr('jsinstance');
            codeAddressa('中国');
            $("#t_c").html('');
            $("#c_c").html('');
            $("#p_city").html('');
            $("#address").val('中国');
            $.ajax({
url:"hyajax.php?",
type:"get",
data:{map_city:city},
dataType:"json",
success:function(data){
var html = fn_city(data);
//市
$("#c_city").append(html);
$(".ch_city").click(function(){
    var ss =$(this).text();
    var c = $(this).attr('jsinstance');
    $("#p_city").html('&gt;<a href="#" class="ch_city" id="p_cc" jsinstance="' +c+ '">'+ss+'</a>');
    var f ='中国'+ss;
    codeAddressa(f);
    $("#address").val(f);
    $("#c_c").html('');
    $("#t_c").html('');

    $.ajax({
url:"hyajax.php?",
type:"get",
data:{map_city:c},
dataType:"json",
success:function(data){

var html = fn_city(data);
//区
$("#c_city").append(html);
$(".ch_city").click(function(){
    var ss =$(this).text();
    var c = $(this).attr('jsinstance');
    $("#c_c").html('&gt;<a href="#" class="ch_city" id="c_cc" jsinstance="' +c+ '">'+ss+'</a>');
    var p =$("#p_cc").text();
    var f ='中国'+p+ss;
    $("#address").val(f);
    codeAddressa(f);

    $("#t_c").html('');
    $.ajax({
url:"hyajax.php?",
type:"get",
data:{map_city:c},
dataType:"json",
success:function(data){

var html = fn_city(data);
$("#c_city").append(html);
$(".ch_city").click(function(){
    var sss =$(this).text();
    var c = $(this).attr('jsinstance');
    $("#t_c").html('&gt;<a href="#" class="ch_city" id="t_cc" jsinstance="' +c+ '">'+sss+'</a>');
    var p =$("#p_cc").text();
    var t =$("#c_cc").text();
    var f ='中国'+p+t+sss;
    $("#address").val(f);
    codeAddressa(f);
    $.ajax({
url:"hyajax.php?",
type:"get",
data:{map_city:c},
dataType:"json",
success:function(data){

var html = fn_city(data);
$("#c_city").append(html);
}
})
    })


}
})
})
}
})
})
}
});
})
});
</script>
<div class="content_b">
<div class="yule-1 fa-1">
<div class="among" style=" width:710px; float:left; height:400px;">
             <div class="among-right">
               <div class="amongs">
               <div>
    <input id="address" type="textbox" value="北京">
        <input type="button" value="查询" onclick="codeAddress()"><br>

         <!--   <input type="button" value="显示中心点" onclick="codeLatLng()">-->
             </div>
            <div id="map_content_a" name="map_content_a"></div>

 <p class="amongs1"><img src="themes/default/images/google.png" />
                <a id="z_city"  href="#" jsinstance="1" title='pp'>中国</a><span id="p_city" ></span><span id ="c_c"></span><strong id ="t_c"></strong>

                </p>
                 <p id="c_city" class="amongs2"> </p>
                 <p class="amongs1"><img src="themes/default/images/google.png" /><strong>分类搜索</strong></p>
                 <p class="amongs2"><a id="port"  href="#" onclick="meishi()">美食</a></p>

               </div>

 

 

地址:http://issconline.com/hyport.php?act=cook

以下是问题补充:

@sunyujun:提示:TypeError: GEvent is undefined [在此错误处中断] GEvent.addListener(pointmarker, "click", function(point) { hyport...t=cook# (第 318 行) 我改如何修改 望高手指点 (2012/09/14 09:18)
加载中
0
s
sunyujun
怎么没人回答啊
0
D
DanielZhao

我的也是这样的问题。你的解决了么?

返回顶部
顶部