Javascript 添加标记和onclick函数以显示信息窗口

我知道这很简单，但对我来说真的很难添加

<script type="text/javascript">
    var map;
    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });
    var marker;

    function createMarker(latlng, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
    }

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 1.4683625, lng: 124.8308826},
            zoom: 15
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

// Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                map.setCenter(pos);

                createMarker(map.getCenter(), "The marker is here");

            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
// Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
    }
    google.maps.event.addDomListener(window, 'load', initMap);
</script>  

var映射；
var infowindow=new google.maps.infowindow({
尺寸：新谷歌。地图。尺寸（150，50）
});
var标记；
函数createMarker（latlng，html）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图
});
google.maps.event.addListener（标记'click'，函数（）{
setContent（contentString）；
信息窗口。打开（地图、标记）；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:1.4683625，lng:124.8308826}，
缩放：15
});
var infoWindow=new google.maps.infoWindow（{map:map}）；
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
地图设置中心（pos）；
createMarker（map.getCenter（），“标记在这里”）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，infoWindow，map.getCenter（））；
}
}
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
信息窗口。设置位置（pos）；
infoWindow.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
}
google.maps.event.addDomListener（窗口'load'，initMap）；

到目前为止，我尝试将其与以下代码结合起来：

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
}

var infowindow=new google.maps.infowindow（{
尺寸：新谷歌地图尺寸（150,50）
});
函数createMarker（latlng，html）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
zIndex:Math.round（latlng.lat（）*-100000）脚本中有错误。必须将
latlng.lat（）
替换为
latlng.lat

我能想到的另一个错误是
map
变量是局部变量，因此不能在
createMarker
中使用。您需要将其移动到全局范围

var map = null;
function initMap(response) {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 1.4683625, lng: 124.8308826},
        zoom: 15
    });
    ...
}

您的
map
变量是
initMap
函数的本地变量，因此无法在
createMarker
函数中访问

代码片段：


//全局映射变量
var映射；
var infowindow=new google.maps.infowindow({
尺寸：新谷歌。地图。尺寸（150，50）
});
函数createMarker（latlng，html）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图
});
google.maps.event.addListener（标记'click'，函数（）{
setContent（contentString）；
信息窗口。打开（地图、标记）；
});
}
函数initMap（响应）{
//初始化map变量的全局版本，不要为此函数创建新的本地版本
map=new google.maps.map（document.getElementById（'map'）{
中心：{
纬度：1.4683625，
液化天然气：124.8308826
},
缩放：15
});
createMarker（map.getCenter（），“标记在这里”）；
}
google.maps.event.addDomListener（窗口，“加载”，initMap）；
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

你看过了吗？是的，但仍然没有luckokay，根据你的代码，我做了一些调整，它几乎可以工作了。我现在可以显示标记，它可以单击，但只显示信息窗口一次，关闭后无法再次打开，请帮我回答更新问题。实际上，我正试图在一段代码中完成它，因为稍后会被重新打开使用反向地理代码获取基于位置lat lng的地址，并将该地址变为php变量（当然在不同的问题中）我没有看到您使用
createMarker
函数。是的，因为在我的代码中，lat和lon是从位置（html 5地理位置）获取的它总是在变化。而地图中心总是处于这种协调状态。这就是为什么我只选择了你的google.maps.Marker和google.maps.event.addListener。有什么解决方案吗？也许使用createMariker函数？但是如何使用createMarker（）从地理位置获取lat lon？