適用於Windows PHONE 8.1的Map API（HTML，CSS，JS）

Question

我知道有一個類似的問題（ Map API在HTML中的Windows Phone上不起作用），但是我沒有足夠的聲譽來評論，所以我不得不問自己的問題。

我已成功將bing映射添加到我的Windows 8.1存儲應用程序（HTML，JS，CSS），但是當嘗試在Visual Studio（映射SDK）中將引用添加到Windows Phone 8.1時，該選項對我不可用。 我仔細回答了先前提出的問題，示例中有一個Windows應用商店應用程序（很好！），一個移動Web應用程序和一個C＃示例。 所以我嘗試了移動網絡版本，但只添加了此鏈接

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-gb"></script>

顯然給出了您無法將遠程腳本添加為本地腳本的錯誤（類似於這些內容）

因此，我嘗試僅從上面的URL復制代碼並保存在本地，但這給了我有關嘗試注入動態內容的腳本的錯誤。 現在，我對下一步的嘗試還有些松懈……對有用內容的任何建議/鏈接將不勝感激！

我應該提到，我已經看到了很多有關添加地圖的文檔，它們都包含在Windows Phone 8.1 sdk中，因此您不需要bing sdk地圖，但這些地圖大多是xaml，有沒有一種方法可以通過js訪問sdk ？

Answer 1

由於Bing Maps擴展僅適用於Windows 8.1應用程序（希望它們會更新...），並且由於您不能在WinJS頁面控件中包含外部JS lib引用，因此您可以通過這種方式使Bing Maps在WP8.1 HTML / JS應用：

在您的Page Control html中插入一個webview，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mapcontrol</title>

</head>
<body>
    <div class="mapcontrol fragment">
        <section id="mapcanvas" class="" aria-label="Main content" role="main">
            <x-ms-webview id="Map" style="width:100%; height:100%"></x-ms-webview>
        </section>
    </div>
</body>
</html>

創建一個HTML頁面和一個JS文件，然后放置創建地圖所需的所有代碼：

HTML頁面（一個WP8源示例的副本）：

<!DOCTYPE html>
<html>
<head>
<title>Bing Map</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx? v=7.0&mkt=en-gb"></script>
<script type="text/javascript" src="/pages/bingmap/bingmap.js"></script>
</head>
<body>
<div id="mapContainer">
    <div id='myMap'></div>
    <div class="appBar">
        <div class="appBarContainer">
            <img id="searchBtn" src="images/search.png" alt="searchBtn" />
            <img id="gpsBtn" src="images/gps.png" alt="gpsBtn" />
            <img id="trafficBtn" src="images/traffic.png" alt="trafficBtn" />
            <img id="mapModeBtn" src="images/layers.png" alt="mapModeBtn" />
        </div>
    </div>
    <div id="navBar">
        <img id="upBtn" src="images/up.png" alt="upBtn" />
        <img id="leftBtn" src="images/left.png" alt="leftBtn" />
        <img id="rightBtn" src="images/right.png" alt="rightBtn" />
        <img id="downBtn" src="images/down.png" alt="downBtn" />
    </div>
    <div id="zoomRotateBar">
        <img id="zoomInBtn" src="images/zoomIn.png" alt="zoomInBtn" />
        <img id="zoomOutBtn" src="images/zoomOut.png" alt="zoomOutBtn" />
        <div id="rotationBtns">
            <img id="rotateCWBtn" src="images/cwRotation.png" alt="rotateCWBtn" />
            <img id="rotateCCWBtn" src="images/ccwRotation.png" alt="rotateCCWBtn" />
        </div>
    </div>
</div>

<div id="searchPanel" style="display:none;">
    <h2>Search</h2>
    <input type="text" id="searchTbx" />
</div>

<div id="mapModePanel" style="display:none;">
    <h2>Map Mode</h2>

    <ul>
        <li>
            <input type="radio" name="mapMode" id="autoMode" value="auto" checked="checked" />
            <label for="autoMode">Auto</label>
        </li>
        <li>
            <input type="radio" name="mapMode" id="aerialMode" value="aerial" />
            <label for="aerialMode">Aerial</label>
        </li>
        <li>
            <input type="radio" name="mapMode" id="birdseyeMode" value="birdseye" />
            <label for="birdseyeMode">Birdseye</label>
        </li>
        <li>
            <input type="radio" name="mapMode" id="osMode" value="os" />
            <label for="osMode">Ordnance Survey</label>
        </li>
        <li>
            <input type="radio" name="mapMode" id="roadMode" value="road" />
            <label for="roadMode">Road</label>
        </li>
    </ul>
</div>
</body>
</html>

此頁面的JS代碼（示例源的副本）：

(function () {
    var map,
    searchManager,
    geoLocationProvider,
    gpsLayer,
    gpsEnabled = false,
    trafficLayer,
    trafficEnabled = false;

// INIZIO INIT
function init() {

    getMap();

    //Test for multi-touch support
    if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
        //Hide zoom and rotate controls
        document.getElementById('zoomRotateBar').style.display = 'none';
    } else {
        //Only display rotation buttons when the map style is birdseye
        Microsoft.Maps.Events.addHandler(map, 'maptypechanged', updateNavBar);
        Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateNavBar);

        //Add zooming and rotating functionality
        addListener(document.getElementById('zoomInBtn'), 'click', function () {
            map.setView({ zoom: map.getZoom() + 1 });
        });

        addListener(document.getElementById('zoomOutBtn'), 'click', function () {
            map.setView({ zoom: map.getZoom() - 1 });
        });

        addListener(document.getElementById('rotateCWBtn'), 'click', function () {
            map.setView({ heading: map.getHeading() + 90 });
        });

        addListener(document.getElementById('rotateCCWBtn'), 'click', function () {
            map.setView({ heading: map.getHeading() - 90 });
        });
    }

    //Test for single-touch support
    if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 0) {
        //Hide navigation controls
        document.getElementById('navBar').style.display = 'none';
    } else {
        //Add panning functionality
        addListener(document.getElementById('upBtn'), 'click', function () {
            map.setView({ center: map.getCenter(), centerOffset: new Microsoft.Maps.Point(0, 100) });
        });

        addListener(document.getElementById('leftBtn'), 'click', function () {
            map.setView({ center: map.getCenter(), centerOffset: new Microsoft.Maps.Point(100, 0) });
        });

        addListener(document.getElementById('rightBtn'), 'click', function () {
            map.setView({ center: map.getCenter(), centerOffset: new Microsoft.Maps.Point(-100, 0) });
        });

        addListener(document.getElementById('downBtn'), 'click', function () {
            map.setView({ center: map.getCenter(), centerOffset: new Microsoft.Maps.Point(0, -100) });
        });
    }

    addListener(document.getElementById('searchBtn'), 'click', function () {
        document.getElementById('searchPanel').style.display = '';
        document.getElementById('searchTbx').focus();
    });

    addListener(document.getElementById('searchTbx'), 'keydown', function (e) {
        if (!e) {
            e = window.event;
        }

        //process search when enter key pressed
        if (e.keyCode == 13) {
            search(this.value);
        }
    });

    addListener(document.getElementById('gpsBtn'), 'click', toggleGPS);

    addListener(document.getElementById('trafficBtn'), 'click', toggleTraffic);

    addListener(document.getElementById('mapModeBtn'), 'click', function () {
        document.getElementById('mapModePanel').style.display = '';
    });

    var mapModeBtns = document.getElementsByName('mapMode');

    for (var i = 0; i < mapModeBtns.length; i++) {
        addListener(mapModeBtns[i], 'click', function () {
            setMapMode(this.value);

            document.getElementById('mapModePanel').style.display = 'none';
        });
    }
}
// FINE INIT



function getMap() {
    var mapOptions = {
        credentials: "YOUR BING MAPS KEY",
        showDashboard: false,
        showCopyright: false,
        showScalebar: false,
        enableSearchLogo: false,
        enableClickableLogo: false,
        backgroundColor: new Microsoft.Maps.Color(255, 0, 0, 0)
    };

    // Initialize the map
    map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);

    gpsLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(gpsLayer);
}

function updateNavBar() {
    if (map.isRotationEnabled()) {
        document.getElementById('rotationBtns').style.display = '';
    } else {
        document.getElementById('rotationBtns').style.display = 'none';
    }
}

function search(query) {
    if (searchManager) {
        var request = {
            where: query,
            count: 1,
            callback: geocodeCallback,
            errorCallback: geocodeError
        };

        searchManager.geocode(request);
    } else {
        //Load the Search module and create a search manager.
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', {
            callback: function () {
                //Create the search manager
                searchManager = new Microsoft.Maps.Search.SearchManager(map);

                //Perfrom search logic
                search(query);
            }
        });
    }
}

function geocodeCallback(response, userData) {
    if (response &&
        response.results &&
        response.results.length > 0) {
        var r = response.results[0];
        var l = new Microsoft.Maps.Location(r.location.latitude, r.location.longitude);

        //Display result on map        
        var p = new Microsoft.Maps.Pushpin(l);
        map.entities.push(p);

        //Zoom to result
        map.setView({ center: l, zoom: 15 });
    } else {
        showMessage("Not results found.");
    }

    document.getElementById('searchPanel').style.display = 'none';
}

function geocodeError(request) {
    showMessage("Unable to Geocode request.");

    document.getElementById('searchPanel').style.display = 'none';
}

function toggleGPS() {
    gpsEnabled = !gpsEnabled;

    // Initialize the location provider
    if (!geoLocationProvider) {
        geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
    }

    //Clear the GPS layer 
    gpsLayer.clear();

    if (gpsEnabled) {
        // Get the user's current location
        geoLocationProvider.getCurrentPosition({
            successCallback: function (e) {
                gpsLayer.push(new Microsoft.Maps.Pushpin(e.center));
            },
            errorCallback: function (e) {
                showMessage(e.internalError);
            }
        });
    } else {
        //Remove the accuracy circle and cancel any request that might be processing
        geoLocationProvider.removeAccuracyCircle();
        geoLocationProvider.cancelCurrentRequest();
    }
}

function toggleTraffic() {
    trafficEnabled = !trafficEnabled;

    //Check to see if the traffic layer exists
    if (trafficLayer) {
        if (trafficEnabled) {
            trafficLayer.show();
        } else {
            trafficLayer.hide();
        }
    } else {
        //Load the traffic module and create the traffic layer.
        Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', {
            callback: function () {
                //Create the traffic layer
                trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);

                //Get the base tile layer and set the opacity
                var layer = trafficLayer.getTileLayer();
                layer.setOptions({ opacity: 0.5 });

                trafficLayer.show();
            }
        });
    }
}

function setMapMode(mode) {
    var m;

    switch (mode) {
        case 'auto':
            m = Microsoft.Maps.MapTypeId.auto;
            break;
        case 'aerial':
            m = Microsoft.Maps.MapTypeId.aerial;
            break;
        case 'birdseye':
            m = Microsoft.Maps.MapTypeId.birdseye;
            break;
        case 'os':
            m = Microsoft.Maps.MapTypeId.ordnanceSurvey;
            break;
        case 'road':
        default:
            m = Microsoft.Maps.MapTypeId.road;
            break;
    }

    map.setView({ mapTypeId: m });
}

function showMessage(msg) {
    try {
        alert(msg);
    }
    catch (e) {
        if (Windows != null &&
            Windows.UI != null &&
            Windows.UI.Popups != null) {
            var popup = Windows.UI.Popups.MessageDialog(msg);
            popup.showAsync();
        }
    }
}

//Cross browser support for adding events. Mainly for IE7/8
function addListener(element, eventName, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
    } else if (element.attachEvent) {
        if (eventName == 'DOMContentLoaded') {
            eventName = 'readystatechange';
        }
        element.attachEvent('on' + eventName, eventHandler);
    }
}

addListener(document, 'DOMContentLoaded', init);
})();

（使用Bing Maps開發人員密鑰更改“您的BING MAPS密鑰”），然后在您的Page Control JS代碼中導航到Web視圖中托管的頁面：

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

var ControlConstructor = WinJS.UI.Pages.define("/pages/mapcontrol/mapcontrol.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        //// TODO: Initialize the page here.


        var webview = document.getElementById("Map");
        webview.navigate("ms-appx-web:///pages/bingmap/bingmap.html");


    },


});

})();

Answer 2

使用您引用的Bing Maps JavaScript控件可以在WP8和8.1中使用。 我將可在WP，Win8和Web上使用的跨平台代碼示例放在一起，並在此處提供了該示例： http : //code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5

Answer 3

實際上，您可以將適用於Win8.1的bing APi添加到WP8.1中，只需修改bing映射APi dll並將文件設置為Visual Studio並像這樣添加bing引用

 <!-- Bing Maps references -->
<script type="text/javascript" src="/Bing.Maps.JavaScript/js/veapicore.js"></script>
<script type="text/javascript" src="/Bing.Maps.JavaScript/js/veapiModules.js"></script>

屏幕截圖

然后在使用Win8.1時正常工作，請參閱我的項目。 順便說一句，添加代碼以驗證連接狀態，僅當連接退出時才使此映射起作用（如果您將手動添加一些圖釘，則它可以在沒有連接的情況下工作）

斯法克斯可濕性粉劑博覽會

適用於Windows PHONE 8.1的Map API（HTML，CSS，JS）

問題描述

3 個解決方案

解決方案1
0 2014-07-18 14:28:11

解決方案2
0 2014-07-19 10:28:07

解決方案3
0 已采納 2014-07-19 11:03:13

適用於Windows PHONE 8.1的Map API（HTML，CSS，JS）

問題描述

3 個解決方案

解決方案1 0 2014-07-18 14:28:11

解決方案2 0 2014-07-19 10:28:07

解決方案3 0 已采納 2014-07-19 11:03:13

解決方案1
0 2014-07-18 14:28:11

解決方案2
0 2014-07-19 10:28:07

解決方案3
0 已采納 2014-07-19 11:03:13