[英]Change google map marker position onclick
I want to move my marker and get the long and lat when I click the map. 当我单击地图时,我想移动我的标记并获得长和纬度。 Currently, my map is displayed but I'm unable to change the marker location. 目前,我的地图已显示,但我无法更改标记位置。 I tried imitating coder in this . 我试图在此模仿编码器。
My reference uses the button to change the location of the marker. 我的参考使用按钮来更改标记的位置。 In my situation, I need to click on the map. 在我的情况下,我需要单击地图。 I tried to modify it to cater my situation and still not working. 我试图对其进行修改以适应我的情况,但仍然无法正常工作。
here is my code : 这是我的代码:
jQuery(document).ready(function( $ ) {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
google.maps.event.addListener(map, 'click', function(event) {
newLocation(event.myCenter);
});
});
});
1) click on map and change marker's position to where you clicked 1)点击地图,然后将标记的位置更改为您点击的位置
var map, marker;
$(document).ready(function() {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(mapCanvas, mapOptions);
marker = new google.maps.Marker(
{
position:myCenter,
draggable: true
}
);
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
// click on map and set you marker to that position
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
});
});
});
2) change a marker's position by drag and drop 2)通过拖放更改标记的位置
var map;
$(document).ready(function() {
function myMap(lat,long) {
var myCenter = new google.maps.LatLng(lat,long);
var mapCanvas = document.getElementById("googleMap");
var mapOptions = {
center: myCenter,
zoom: 15,
treetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker(
{
position:myCenter,
draggable: true // set marker draggable
}
);
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
// when dragend, show new lat and lng in console
google.maps.event.addListener(marker, 'dragend', function(){
console.log("lat: "+marker.position.lat())
console.log("lng: "+marker.position.lng())
})
//sets variable for lat and long
$('.lat').text(lat);
$('.long').text(long);
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));
$(document).ready(function ()
{
google.maps.event.addListener(map, 'click', function(event) {
newLocation(event.myCenter);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.