Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图标记在IE中的位置不正确，在chrome上运行良好

Javascript 谷歌地图标记在IE中的位置不正确，在chrome上运行良好

javascript google-maps google-maps-api-3

Javascript 谷歌地图标记在IE中的位置不正确，在chrome上运行良好,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我用谷歌API在我的页面上绘制了一张路线图。现在让我们假设我已经打印了一张从a点到B点的路线图，它从C点开始。现在我在地图上显示一些带有C点的标记。它可以与Chrome配合使用，但不能与Internet Explorer配合使用 这是我的密码。要运行它，请从列表中选择一个地址，然后单击提交 <html> <head> key=25888957881@project.googleusercontent.com <meta name="viewport"

我用谷歌API在我的页面上绘制了一张路线图。现在让我们假设我已经打印了一张从a点到B点的路线图，它从C点开始。现在我在地图上显示一些带有C点的标记。它可以与Chrome配合使用，但不能与Internet Explorer配合使用

这是我的密码。要运行它，请从列表中选择一个地址，然后单击提交

<html>
<head>
    key=25888957881@project.googleusercontent.com
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>

    <style type="text/css">
        .labels 
        {
            color: red;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            width: 40px;
            border: 2px solid black;
            white-space: nowrap;
        }
    </style>


    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    <script type="text/javascript" 
        src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
    <script type="text/javascript"  language=javascript>

        var latLng = new google.maps.LatLng(41.850033, -87.6500523);
        var homeLatLng = new google.maps.LatLng(41.850033, -87.6500523);
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;


        function SetfC(src) {
            document.getElementById('id1').focus();
            src.blur();
        }

        function ShowPhoneNumber(address, Number, Text) {

            codeAddress(address, Number, Text);
        }


        function codeAddress(address, Number, Text) {

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var marker1 = new MarkerWithLabel({
                    position: results[0].geometry.location,
                    draggable: true,
                    raiseOnDrag: true,
                    map: map,
                    labelContent: Number,
                    labelAnchor: new google.maps.Point(results[0].geometry.location),
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: { opacity: 0.75 },
                    icon: {}
                    });
                    var iw1 = new google.maps.InfoWindow({
                    content: Text
                    });

                    google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
                }
                else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });

        }

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(41.850033, -87.6500523);
            var mapOptions = {
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago

            }

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);

            directionsDisplay.setPanel(document.getElementById('directionsPanel'));


            calcRoute();
        }

        function calcRoute() {

            var start = document.getElementById('start').value;
            var end = document.getElementById('end').value;
            var waypts = [];
            var checkboxArray = document.getElementById('waypoints');
            for (var i = 0; i < checkboxArray.length; i++) {
                if (checkboxArray.options[i].selected == true) {
                    ShowPhoneNumber(checkboxArray[i].value, 'NUM', 'Rohit  ');

                    waypts.push({
                        location: checkboxArray[i].value,
                        stopover: true
                    });
                }
            }

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var summaryPanel = document.getElementById('directions_panel');
                    summaryPanel.innerHTML = '';
                    // For each route, display summary information.
                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
                        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
                        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
                    }
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>


<body>
    <input onclick="alert(2+2)" type="button" id="id1" value="click"/>

    <select id="opt" onfocus="SetfC(this);" onmouseup="SetfC(this);">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>



    <div id="map-canvas" style="float:left;width:60%;height:85%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
        <option value="Halifax, NS">Halifax, NS</option>
        <option value="Boston, MA">Boston, MA</option>
        <option value="New York, NY">New York, NY</option>
        <option value="Miami, FL">Miami, FL</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
        <option value="VILLA RICA, 65 E INDUSTRIAL CT, GA, 30180-1037 Time: 12:00PM to 1:00 PM">Montreal, QBC</input>
        <option value="4025 PLEASANTDALE RD, DORAVILLE, GA, 30340-4262 Time: 00:00AM to 1:00 AM">Toronto, ONT</input>
        <option value="chicago, il">Chicago</input>
        <option value="winnipeg, mb">Winnipeg</input>
        <option value="fargo, nd">Fargo</input>
        <option value="calgary, ab">Calgary</input>
        <option value="spokane, wa">Spokane</input>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
        <option value="Vancouver, BC">Vancouver, BC</option>
        <option value="Seattle, WA">Seattle, WA</option>
        <option value="San Francisco, CA">San Francisco, CA</option>
        <option value="Los Angeles, CA">Los Angeles, CA</option>
    </select>
    <br>
    <input type="submit" onclick="calcRoute();">
    </div>
        <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
    <p>Total Distance: <span id="total"></span></p>
</body>


钥匙=25888957881@project.googleusercontent.com
方向上的航路点
.标签
{
颜色：红色；
背景色：白色；
字体系列：“Lucida Grande”，“Arial”，无衬线；
字体大小：10px；
字体大小：粗体；
文本对齐：居中；
宽度：40px；
边框：2件纯黑；
空白：nowrap；
}
var latLng=新的google.maps.latLng（41.850033，-87.6500523）；
var homeLatLng=新的google.maps.LatLng（41.850033，-87.6500523）；
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数SetfC（src）{
document.getElementById（'id1'）.focus（）；
src.blur（）；
}
函数ShowPhoneNumber（地址、号码、文本）{
代码地址（地址、编号、文本）；
}
功能代码地址（地址、编号、文本）{
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var marker1=新的MarkerWithLabel({
位置：结果[0]。geometry.location，
真的，
是的，
地图：地图，
标签内容：编号，
labelAnchor:new google.maps.Point（结果[0].geometry.location），
labelClass:“labels”，//标签的CSS类
标签样式：{不透明度：0.75}，
图标：{}
});
var iw1=新的google.maps.InfoWindow({
内容：文本
});
google.maps.event.addListener（marker1，“click”，函数（e）{iw1.open（map，this）；}）；
}
否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'directionsPanel'）；
calcRoute（）；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var-waypts=[]；
var checkboxArray=document.getElementById（'waypoints'）；
对于（var i=0；i；
summaryPanel.innerHTML+=route.legs[i]。起始地址+'to'；
summaryPanel.innerHTML+=route.legs[i]。结束地址+'
'；
summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
沃尔沃汽车
萨博
梅赛德斯
奥迪
开始：
哈利法克斯，北卡罗来纳州
马萨诸塞州波士顿
纽约州纽约市
佛罗里达州迈阿密


航路点：

（按Ctrl键可选择多个选项）

蒙特利尔，QBC
安大略省多伦多市
芝加哥
温尼伯
法戈
卡尔加里
斯波坎


完:
不列颠哥伦比亚省温哥华
华盛顿州西雅图
CA旧金山
加利福尼亚州洛杉矶


总距离：

谢谢

答案如下：

基本上，您需要将map声明为全局变量。 像这样：

在全局上下文中。

问题在于标记器不接受锚定点。所以我改变了密码形式

labelAnchor: new google.maps.Point(results[0].geometry.location)
到

现在它正处于正确的位置

i 
labelAnchor: new google.maps.Point(results[0].geometry.location)

labelAnchor: new google.maps.Point(22,0)