当我点击按钮时在GoogleMap上添加标记

hts6caw3  于 2022-10-24  发布在  Go
关注(0)|答案(2)|浏览(161)

我想在谷歌Map上添加标记,通过我的NG-点击通过具有经度和纬度的对象,这样它就会把标记放到Map上.任何帮助请
示例代码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!"
 });
ibps3vxo

ibps3vxo1#

这个问题似乎已经回答了here,在这里的Google文档中可以找到一个例子

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

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

aoyhnmkz2#

然而,不起作用的是什么还不清楚。
假设已加载Map:

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

请注意Async和Callback=initMap,将变量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,
    });
}

然后,当从按钮调用函数时,它使用map变量,而不是尝试创建新的

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);
}

相关问题