google-maps-api-3 - 将谷歌地图 api v2 转换为 v3 在 main.js 中获取脚本错误

Question

我正在将我的代码从版本 2 转换为版本 3。我在 http://maps.gstatic.com/intl/en_us/mapfiles/api-3/12/9/main.js中收到脚本错误 我在页面上的代码就像

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=<%=strGk%>"></script>
   <script type="text/javascript">
function initialize() {
            var myOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: "<%=strOrig%>",
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.BOTTOM
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.TOP_LEFT
            }
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directions"));
        google.maps.event.addListener(directionsDisplay, "addoverlay", afterDir);
        google.maps.event.addListener(directionsDisplay, "error", handleErrors);
        //  geocoder = new GClientGeocoder();
        geocoder = new google.maps.Geocoder();    

Answer 1

您正在使用已弃用的已弃用的导航控件

在 V3 中，它分为单独的缩放和平移控件。查看文档

尝试

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(55.91913101970850, -4.650520),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        //style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'),
                                mapOptions);
}