如何使用 javascript 实现交互式地图？答案

【问题标题】：How to implement an interactive map with javascript?如何使用 javascript 实现交互式地图？
【发布时间】：2014-10-21 08:01:23
【问题描述】：

我想构建一个以州地图为背景的网页。当鼠标悬停在一个城市上时，鼠标指针附近会弹出一个小窗口，显示该城市的一些信息。

我不记得有任何网站实现了此功能。一个类似的例子是谷歌地图，然而，用户需要点击一个位置才能显示该位置的信息。

有人知道这种网页吗？我怎样才能建立这样一个网页？

【问题讨论】：

您可以使用谷歌地图 (developers.google.com/maps/?hl=it)、传单 (leafletjs.com) 或其他地图服务或创建自己的简化版本
使用 d3.js，它是免费的。 datamaps.github.io
@ManjunathSiddappa d3.js 太棒了！

标签： javascript jquery html

【解决方案1】：

不过，我会向您推荐传单： www.leafletjs.com

Leaflet 是当今最流行的 js 地图库。如果您知道如何使用 JS，那么您将没有任何麻烦。它有很好的记录。以下是一些传单教程： http://leafletjs.com/examples/quick-start.html

【讨论】：

【解决方案2】：

我会使用谷歌地图和它的信息窗口功能，

快速入门将如下所示；

    <!--load the api in your html side-->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=es&region=ES"></script> 

    <!--place a map canvas with a selector inside your <body> tags-->
    <div id="gmap_div" style="width:400px;height:400px;"></div>

    <!-- then initialize it and work with the map object; -->
    <body onload="initialize()">

/* the javascript */

        function initialize() {


                mapOptions = {
                  center: new google.maps.LatLng(40.41678, -3.70379),
                  zoom: 12,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("gmap_div"),
                    mapOptions);

            }

这是从 gmaps 开始，然后创建窗口或将事件附加到它并不难。

您可以在此处找到所有 gmap 文档：

[https://developers.google.com/maps/documentation/javascript/?hl=en][1]

【讨论】：