如何链接的onclick功能与谷歌地图

how to link the onclick function with google map

本文关键字：onclick 功能 谷歌地图 何链接 链接      更新时间：2023-09-26

我有这个代码，它在点击提醒我一个地方的晚和晚。我怎么能整合谷歌地图，以显示在谷歌地图的地方。

$("body").on("click",".names",function(){
        var latitude = $(this).children(".latitude").text();
        alert(latitude);
    });

感谢

Updata . .这是我做的数据库。所以当我点击其中一个列表时它会提醒我最后n个长度。而不是让我注意到未来。我想在谷歌地图上显示这个地方。希望这能澄清我的观点

$('document').ready(function(){
    var db = openDatabase('To Do', '1.0', 'To Do', 2 * 1024 * 1024);
    db.transaction(function(tx){
 tx.executeSql('SELECT * FROM BNames', [], querySucess, errorCB);
});
function querySucess(tx, results){
    var len = results.rows.length;
        if(len > 0){
        for(i = 0; i < len; i++){           //<span here>//
    $("#list").append("<ul><li class='names'<br>" + results.rows.item(i).id +   "   "+ results.rows.item(i).name + "<span class='latitude'> " + results.rows.item(i).latitude +  "</span><span class='latitude'> " + results.rows.item(i).longtitude +" </span> [<a href='#' onclick='deletefunction(" + results.rows.item(i).id + ");'>DELETE</a>] </li></ul>");
}
}else{
    console.log("You Have No BuildingNames");
}
}
function errorCB(err){
    alert("Error" + err.code);
}
});
HTML 
<!DOCTYPE>
<html>
<body>
<input type="text" id="name" placeholder="BName"/>
<input type="text" id="latitude"  placeholder="latitude"/>
<input type="text" id="longitude" placeholder="longitude"/>
<input type="button" id="Add" value="Add"/>
<div id="list"> </div>
<div id="map-canvas"></div>

<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

你在找这个吗?

    $("body").on("click",".names",function(){
    //next two lines most likely need replacing.
    var latitude = $("#latitude").text();
    var longitude = $("#longitude").text();
    var myLatlng = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!'
      });
});
相关文章：