在地图上显示标记 [英] Showing Marker on the Map

问题描述

我正在尝试在谷歌地图上显示纬度和经度。用我的代码我得到了谷歌地图的空盒子。



这是我显示数据的div标签。

I am trying to display latitude and longitude on google maps. with my code i am getting empty box with google map.

Here is the div tag where i am displaying data.

<div id="map"></div>

这是在html页面上调用locate函数的按钮

Here is the button calling the locate function on html page

<td><button type="button" class="btn btn-primary" ng-click="MyMap(record.id ,record.coordinates)">{{record.coordinates}} </button>

以下是我试图在谷歌地图上显示标记的功能

Here is the Function throught which i am trying to display marker on the google map

$scope.MyMap=function(id,coordinates)
        {

                console.log(id,coordinates);
                locate(coordinates);


        }
    function locate(coordinates) {
        console.log(coordinates);
  var myLatlng = new google.maps.LatLng(coordinates[1], coordinates[0]);
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: myLatlng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  })

}

当我点击按钮时，我在地图div中得到了一个空的灰色框。问题在哪里

When i Click on the button I got the empty grey box in the map div. where is the problem

推荐答案

范围 .MyMap = function（id，coordinates）
{

console 。 log（id，coordinates）;
locate（coordinates）;


}
function locate（coordinates） {
console 。 log（coordinates）;
var myLatlng = < span class =code-leadattribute> new google 。 maps .LatLng（coordinates [ 1]，坐标[0]）;
var map = < span class =code-leadattribute> new google 。 maps .Map（
document .getElementById（map），{
center ： myLatlng，
zoom：13，
mapTypeId：google.maps.MapTypeId.ROADMAP
} ）;
var marker = new google 。 maps .Marker（{
position ： myLatlng，
map ：map
} ）

}

scope.MyMap=function(id,coordinates) { console.log(id,coordinates); locate(coordinates); } function locate(coordinates) { console.log(coordinates); var myLatlng = new google.maps.LatLng(coordinates[1], coordinates[0]); var map = new google.maps.Map( document.getElementById("map"), { center: myLatlng, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: myLatlng, map: map }) }

当我点击按钮时，我在地图div中得到了一个空的灰色框。问题出在哪里

When i Click on the button I got the empty grey box in the map div. where is the problem

这篇关于在地图上显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！