将Bings地图添加到html js

Question

我使用了下面的代码并传递了位置。
但它不返回任何地图。我用变量替换了“纽约”。 console.log 确实显示了该值，但不知何故没有显示地图。

https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/search-module-examples/basic-geocode-example

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <body>
Location: <input type="text" name="a" id="a"><br>
<button onclick="GetMap(document.getElementById('a').value )">Submit</button>
</body>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, searchManager;
 
    function GetMap(qry) {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u'
        });
var qry1=qry;
        //Make a request to geocode New York, NY.
 
        geocodeQuery(qry1);

    }

    function geocodeQuery(query) {
console.log(query);
        //If search manager is not defined, load the search module.
        if (!searchManager) {
            //Create an instance of the search manager and call the geocodeQuery function again.
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(query);
            });
        } else {
            var searchRequest = {
                where: query,
                callback: function (r) {
                    //Add the first result to the map and zoom into it.
                    if (r && r.results && r.results.length > 0) {
                        var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                        map.entities.push(pin);

                        map.setView({ bounds: r.results[0].bestView });
                    }
                },
                errorCallback: function (e) {
                    //If there is an error, alert the user about it.
                    alert("No results found.");
                }
            };

            //Make the geocode request.
            searchManager.geocode(searchRequest);
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Answer 1

HTML 文档的

<head>

部分不应包含

<body>

标记。将与正文相关的 HTML 元素移至

<body>

部分。

您正在尝试创建具有 ID
```
myMap
```
的地图，但我没有看到具有该 ID 的 HTML 元素。您需要将 ID 为
```
div
```
的
```
myMap
```
元素添加到 HTML。

更新代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    Location: <input type="text" name="a" id="a"><br>
    <button onclick="GetMap(document.getElementById('a').value)">Submit</button>

    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

    <script type='text/javascript'>
        var map, searchManager;

        function GetMap(qry) {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u'
            });
            var qry1 = qry;
            geocodeQuery(qry1);
        }

        function geocodeQuery(query) {
            console.log(query);
            if (!searchManager) {
                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    geocodeQuery(query);
                });
            } else {
                var searchRequest = {
                    where: query,
                    callback: function (r) {
                        if (r && r.results && r.results.length > 0) {
                            var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                            map.entities.push(pin);
                            map.setView({ bounds: r.results[0].bestView });
                        }
                    },
                    errorCallback: function (e) {
                        alert("No results found.");
                    }
                };
                searchManager.geocode(searchRequest);
            }
        }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</body>
</html>

我更新了脚本源以使用 HTTPS 加载 Bing Maps API，并且我还调用
```
GetMap
```
作为脚本源中的
```
callback
```
参数，以确保在加载 Bing Maps API 后初始化地图。

将Bings地图添加到html js

问题描述投票：0回答：1

1个回答

最新问题

将Bings地图添加到html js

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1