Javascript 从下拉菜单放大到Google标记_Javascript_Google Maps_Google Maps Api 3

Javascript 从下拉菜单放大到Google标记

javascript google-maps google-maps-api-3

Javascript 从下拉菜单放大到Google标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在尝试创建一个带有标记的世界地图。我想要一个下拉列表，当你点击一个国家名称时，地图会缩放到放置了标记的国家。我在谷歌上搜索了一下，发现了一个问题：这基本上就是我要找的。我试图编辑它，但它不工作。我不需要信息窗口，只需要在每个标记上悬停时的国家名称。我也在制作自己的马克笔。我还添加了一个“你的位置”功能，我正在使用它作为地图的中心。我想包括在下拉菜单，当点击它的中心地图回到原来的位置。一旦我让它发挥作用，我应该能够把世界上的每一个国家都加进去。有没有关于我做错了什么以及如何让它起作用的想法 J

我正在尝试创建一个带有标记的世界地图。我想要一个下拉列表，当你点击一个国家名称时，地图会缩放到放置了标记的国家。我在谷歌上搜索了一下，发现了一个问题：这基本上就是我要找的。我试图编辑它，但它不工作。我不需要信息窗口，只需要在每个标记上悬停时的国家名称。我也在制作自己的马克笔。我还添加了一个“你的位置”功能，我正在使用它作为地图的中心。我想包括在下拉菜单，当点击它的中心地图回到原来的位置。一旦我让它发挥作用，我应该能够把世界上的每一个国家都加进去。有没有关于我做错了什么以及如何让它起作用的想法

Javascript：

function findYou(){
    if(navigator.geolocation.getCurrentPosition(showPosition, noLocation, {maximumAge : 1200000, timeout : 30000})){
    }
     else{
        document.getElementById("lat").innerHTML="This browser does not support geolocation.";
    }
    }
    function showPosition(location){
        var latitude = location.coords.latitude;
        var longitude = location.coords.longitude;
        var accuracy = location.coords.accuracy;
        var position = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            zoom:2,
            center: position,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL }
  }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var homeIcon = 'YourLocation.png';
    var point = new google.maps.Marker({
        icon: homeIcon,
        position: position,
        map: map,
        title:"Your Location"
    });
    markers[1] = UnitedStatesMarker;

    var myLatLng = new google.maps.LatLng(38.907192, -77.036871);
    var UnitedStatesMarker = new google.maps.Marker({
        position: myLatLng,
        icon: src = 'UnitedStates.png',
        map: map,
        title: "United States"
    });
    markers[2] = UnitedStatesMarker;

function dropdownChanged()
{
    var index = document.getElementById("myList3").value;
    var marker = markers[index];
    var position = marker.getPosition();
    map.setCenter(position);
}

HTML：

<title>World Countries</title>
<style>
#map-canvas {
    top: 5px;
    left: 5px;
    width:75%;
    height:600px;
    border:1px solid black;
}    
#sidebar {
    width:325px;
    height:600px;
    position: absolute;
    top: 8px;
    right: 13px;
    text-align:center;
}    
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="javascript4.js"></script>    
</head> 
<body>
<script>findYou();</script>
<div id="map-canvas"></div>
<div id="sidebar">
<h3>World Countries</h3>
<select id = "myList3" onchange="dropdownChanged();">
<option value = "">Select a Country</option>
<option value = "1">Your Location</option>
<option value = "2">United States</option>

如果您计划管理一长串标记，那么在代码中正确声明它们是个坏主意。最好将它们放在一个数组中，并在该数组上循环以封装所需的行为

但是首先：这里需要两个基本的HTML元素：一个用于保存目的地的SELECT控件，我们会说它的ID是selectlocation，另一个用于保存地图的DIV

<select id="selectlocation">
    <option value="10|10|3">Original Map</option>
</select>
<div id="map-canvas"></div>

然后，当您的映射已经初始化时，您可以迭代markerData以向SELECT控件添加一个标记和一个选项

markerData.forEach(function(data) {
    // Create a marker on given position
    var newmarker= new google.maps.Marker({
        map:map,
        position:{lat:data.lat, lng:data.lng},
        title: data.name
    });

    // Create an option on the SELECT control
    jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>');
});

有几种方法可以做到这一点，不要认为我的方法是正确的。您可以将标记放在数组中，并使用元素指向该数组中的给定索引，也可以使用数据属性避免对选项值使用拆分，但这些只是实现细节。

请使用代码创建一个索引。

markerData.forEach(function(data) {
    // Create a marker on given position
    var newmarker= new google.maps.Marker({
        map:map,
        position:{lat:data.lat, lng:data.lng},
        title: data.name
    });

    // Create an option on the SELECT control
    jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>');
});

jQuery(document).on('change','#selectlocation',function() {
    var latlngzoom = jQuery(this).val().split('|');
    var newzoom = 1*latlngzoom[2],
    newlat = 1*latlngzoom[0],
    newlng = 1*latlngzoom[1];
    map.setZoom(newzoom);
    map.setCenter({lat:newlat, lng:newlng});
});