谷歌地图v3信息框未加载

史蒂文·摩尔

对不起,我知道这个问题已经被覆盖了很多次,但是无论我给出什么答案,它似乎都对我不起作用。

基本上,我无法在单击时加载信息框...。每次我使用代码创建和加载信息框时,似乎都无法加载标记。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="http://google-maps-utility-library- v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var markers = [];
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(54.899114,-1.730348);

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var boxOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    var infobox= new InfoBox();
    var myOptions = {
        zoom: 8,
        //scrollwheel: false,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);
    addPostCode('POSTCODE');
    addPostCode('POSTCODE');
addPostCode('POSTCODE');

}

function addPostCode(zip) {
    geocoder.geocode( { 'address': zip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        var iconBase = 'http://www.mywebsite.co.uk/images/';
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        url:'http://www.google.com',
        map: map,
        position: results[0].geometry.location,
        name: zip,
        icon: iconBase + 'icon.png'
        //shadow: iconBase + 'schools_maps.shadow.png'
    });

    google.maps.event.addListener(marker, 'click', function() {
        //window.location.href = marker.url;
        infobox.setContent('test');
        infobox.open(map, marker);
        });
    markers.push(marker);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
    });
}

function checkZip(zip)
{
    var distance = Number.MAX_VALUE;
    var index = 0;
    geocoder.geocode( { 'address': zip}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            for(ix=0; ix< markers.length; ix++)
            {
                var tmp = getDistance(results[0].geometry.location, markers[ix].position);
                if (tmp < distance)
                {
                    distance = tmp;
                    index = ix;
                }
            }
            alert('nearest zipcode is :' + markers[index].name);
        }
    });
}

function getDistance(latlng1, latlng2)
{
    var R = 6371; // Radius of the earth in km
    var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180;  // Javascript functions in radians
    var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(latlng1.lat()  * Math.PI / 180) * Math.cos(latlng2.lat()  * Math.PI / 180) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c; // Distance in km
    d = d * 0.621371192;
    return d;
}
</script>
地理编码

我收到错误“ InfoBox未定义”。因为您的帖子中有错字(在您的真实代码中)。

然后,我看到标记(显然不是您的自定义标记,因为您没有提供正确的URL)。

如果单击标记,则会出现错误:Error: 'infobox' is undefined

如果我通过将“ infobox”变量的声明移至全局作用域来解决此问题,则它可以正常工作,但没有任何信息内容...

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var markers = [];
var infobox= new InfoBox();
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(54.899114,-1.730348);

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var boxOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    var myOptions = {
        zoom: 8,
        //scrollwheel: false,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);
    addPostCode('POSTCODE');
    addPostCode('POSTCODE');
addPostCode('POSTCODE');

}

function addPostCode(zip) {
    geocoder.geocode( { 'address': zip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK)
    {
        var iconBase = 'http://www.mywebsite.co.uk/images/';
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        url:'http://www.google.com',
        map: map,
        position: results[0].geometry.location,
        name: zip /*,
        icon: iconBase + 'icon.png' */
        //shadow: iconBase + 'schools_maps.shadow.png'
    });

    google.maps.event.addListener(marker, 'click', function() {
        //window.location.href = marker.url;
        infobox.setContent('test');
        infobox.open(map, marker);
        });
    markers.push(marker);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
    });
}

</script>

工作实例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

谷歌地图信息窗口未加载

来自分类Dev

谷歌地图未加载

来自分类Dev

谷歌地图未加载

来自分类Dev

谷歌地图api v3无法获取信息框以在动态创建的多边形上显示

来自分类Dev

关闭所有信息窗口谷歌地图API V3?

来自分类Dev

关闭所有信息窗口谷歌地图API V3?

来自分类Dev

Googlemap API v3出现错误,未加载地图

来自分类Dev

角,谷歌地图。地图未加载模板

来自分类Dev

谷歌地图未加载变量值

来自分类Dev

AGM Angular 谷歌地图图像未加载

来自分类Dev

谷歌地图v3模糊与科尔多瓦/ phonegap

来自分类Dev

如何从谷歌地图v3删除标记?

来自分类Dev

谷歌地图v3模糊与科尔多瓦/ phonegap

来自分类Dev

谷歌地图api v3显示不同的标记

来自分类Dev

谷歌地图在点击javascript v3上添加标记

来自分类Dev

谷歌地图v3:边界中心与地图中心不同

来自分类Dev

Google Maps V3信息框始终位于中心

来自分类Dev

无法加载FragmentActivity,谷歌地图v 2

来自分类Dev

删除多边形谷歌地图API v3的顶点

来自分类Dev

谷歌地图api v3图标的双重图像

来自分类Dev

谷歌地图API v3触发链接点击街景

来自分类Dev

谷歌地图上点击javascript v3添加标记

来自分类Dev

谷歌地图API v3触发链接点击街景

来自分类Dev

谷歌地图v3 api-选择位置并标记它

来自分类Dev

获取多边形的质心不起作用的谷歌地图v3

来自分类Dev

谷歌地图v3的ngmap在Internet Explorer 11上不起作用

来自分类Dev

谷歌地图 API v3 绘图管理器没有正确绘制虚线折线

来自分类Dev

(Ionic V3) MapBox 第三次未加载

来自分类Dev

如何在谷歌地图标记上显示信息框