如何在谷歌地图上高亮下拉选择区域的区域

How to highlite region of dropdown selected area on Google Map

本文关键字：区域 选择 高亮 谷歌地图      更新时间：2023-09-26

如何突出下拉选择的区域在谷歌地图上，但我想通过jQuery或javascript，我的实际要求是像这个下拉是自动完成地址和哪个地区或城市，当我选择下拉，谷歌地图只是高亮这些区域我的自定义高亮颜色。

<select> 
   <option>Los angeles </option>
   <option>California</option>
   <option>New yourk</option>
</select>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

下面的例子演示了如何在用户选择时显示位置:

 var locations = [
        { City: 'New York', Location: '!1m18!1m12!1m3!1d193578.74109040972!2d-73.97968099999999!3d40.703312749999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+Yhdysvallat!5e0!3m2!1sfi!2sfi!4v1442836316382' },
        { City: 'Los Angeles', Location: '!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072' }
    ];
    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].Location + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);
    $('#optLocations').on('change', function () {
        var src = "https://www.google.com/maps/embed?pb=" + this.value;
        $('#embedMap').attr('src', src);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

示例2

使用Google Maps嵌入API

  var locations = [
        { City: 'New York' },
        { City: 'Los Angeles' },
        { City: 'Moscow' },
        { City: 'Paris' }
    ];
    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].City + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);
    $('#optLocations').on('change', function () {
        //the key is provided for demonstration purposes only! 
        var embedUrl = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyB-MCwhB8ITpjZQyznpnJtPP0ca-62s-jw&q=' + this.value;
        $('#embedMap').attr('src', embedUrl);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

目前，你不能通过Google Map API 。请看这篇文章了解更多细节。

然而，Vadim Gremyachev的答案中提到了一种变通方法:使用Google Map Embed。

如果您想突出显示国家(而不是州)，请使用Geo Charts服务。

相关文章：