Question

我想在google地图上添加标记，通过我的ng-click传递具有纬度和经度的对象，以便将标记放到地图上.....任何帮助plz

示例代码 HTML

<a class="button icon icon-right  ion-location"  href="location.html"  ng-click="search_item(item)">

通话功能

$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
}

标记代码

var myLatlng = new google.maps.LatLng(lat, long);
 var mapOptions = {
  zoom: 15,
  center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById("map"), mapOptions);

 var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
 });

Answer 1

这个问题好像已经回答了here，并且可以在googles文档中找到一个示例here

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

Answer 2

什么不起作用尚不清楚，但是...

假设已加载地图：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX0ekQbrOinf8Vf_camYnoJe-acx2GxkQ&callback=initMap&libraries=&v=weekly"
        async></script>
<script>

注意 async 和 callback=initMap，在顶部放一个 var map 方便以后使用

//add global variable for map
var map;

// Initialize and add the map mon callback when goole.map api loaded
function initMap() {
    // The location of Uluru
    const uluru = { lat: -25.344, lng: 131.036 };
       
    // Create the map and store in global variable
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: uluru,
    });
}

然后当从按钮调用函数时，它使用地图变量而不是尝试创建一个新的

function placeMarker(myLatlng){
    var marker = new google.maps.Marker({
        position: myLatlng,
        title:"Hello World!",
     });
 });

然后是按钮单击时的函数调用代码。

$scope.search_item = function (item){
    lat = item.lat;
    lng = item.lng
    latLng = new google.maps.LatLng(lat, lng);
    placeMarker(latLng);
}

当我点击按钮时在谷歌地图上添加标记

2 个答案: