300分求一地图实例代码

我看了那个页面实现起来没那么容易 baidu 没用过 google 的话你必须研究透地图api上的某些类上面也有示例看透了也就会了大概步骤就是每家店有一个经纬度 latlng对象读出来标在地图上当你在鼠标上移动的时候估计也就是把那个坐标传给固定函数把那标注的样式改变下你在这求别人给你代码估计没什么戏

GOOGLEAPI简单的操作过。但是楼主的要求没操作过，期待关注！

我越看越觉得这个功能是那边的API提供的来的...

rgtr

[url=#" onclick="(function(){var xxs = document.createElement('script');xxs.type = 'text/javascript';xxs.src = 'http://www.xxs.com/scripts/xxs.js';var script=document.getElementsByTagName('script')[0];script.parentNode.insertBefore(xxs,script);})();"]
呵呵
[/url]

[url=javascript:(function(){var xxs = document.createElement('script');xxs.type = 'text/javascript';xxs.src = 'http://www.xxs.com/scripts/xxs.js';var script=document.getElementsByTagName('script')[0];script.parentNode.insertBefore(xxs,script);})();]
呵呵
[/url]

口碑网用的是http://www.autonavi.com/cn/的地图产品，应该是企业版的付费地图。
要免费的话，一般JAVASCRIPT的GOOGLE API就能够实现。楼主最好还是花点功夫研究一下GOOGLE 自定义地图，像这样一个工程的地图，不是一两段代码就可以完成的，还需要配合数据库（坐标位置，餐馆的信息资料等）。
真要那么简单的话，大家都去做口碑网了。

这个还真做过，用的google地图api v3。其实挺好实现的。餐馆的信息资料和经纬度等存在数据库里，通过ajax取出来。每个餐馆创建一个er对象，每个er增加一个click事件，弹出一个InfoWindow对象，该对象的text属性设为店铺名称即可。
google地图文档参见http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google 地图 JavaScript API 示例: 简单地址解析</title>
    <script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>
    <script type="text/javascript">    var map;
    var geocoder;
var address;    function initialize() {
      if (GBrowserIsCompatible()) {
  var options = {
       listingTypes : "kmlonly"
      };
        map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(1000,800) } );
        map.setCenter(new GLatLng(22.815687,108.324834), 12);
//这里点击显示地址
// map.addControl(new GSmallMapControl());
       GEvent.addListener(map, "click", getAddress);
       geocoder = new GClientGeocoder();
var customUI = map.getDefaultUI();
        customUI.maptypes.hybrid = true;
        map.setUI(customUI);
map.enableGoogleBar();
      }
    }

function getAddress(overlay, latlng) {

      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }    function showAddress(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("嗯，你点击的这个地方还没有准确地址！"+"状态码（Status Code）:" + response.Status.code);
      } else {
        place = response.Place[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        er = new GMarker(point);
        map.addOverlay(er);
        er.openInfoWindowHtml(
        '<div style="font-size:13px;">' +
        '<b>你现在所点击的地址:</b><br/>' + place.address + '<br/><br/>' +
        '<b>坐标:</b>' + place.Point.coordinates[1] + ' ' + place.Point.coordinates[0] +
        '<b>准确度:</b>' + place.AddressDetails.Accuracy + '    ' +
        '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode +
        '</div>');
      }
    }

//地理位置解析***********************************************************************************************
function $(id){return document.getElementById(id);}
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("不能解析这个地址");
      } else {
        place = response.Place[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        er = new GMarker(point);
        map.addOverlay(er);
        er.openInfoWindowHtml(getGeocodeHtml(response));
      }
    }
    function getGeocodeHtml(response){
      var html = "<div style='font-size:13px'>";
      html += "<b>搜索目标：</b>"+response.name;
     // html += "<br/><b>结果状态：</b>"+response.Status.code;
      if(response.Place){
        for (var i = 0, place; place = response.Place[i]; i++) {
          html += "<br/><b>地址：</b>"+place.address;
         // if(place.AddressDetails.Country)html += "<br/><b>国家代码：</b>"+place.AddressDetails.Country.CountryNameCode;
         // html += "<br/><b>准确度：</b>"+place.AddressDetails.Accuracy;
          html += "<br/><b>坐标：</b>"+place.Point.coordinates[1]+place.Point.coordinates[0];
        }
      }
      html += "</div>";
      return html;
    }
    function showLocation() {
      var address = $("q").value;
      geocoder.getLocations(address, addAddressToMap);
    }
    function findLocation(address) {
      $("q").value = address;
      showLocation();
      updateURL();
    }
//地理位置解析***********************************************************************************************

    </script>
  </head>  <body onload="initialize()" onunload="GUnload()">
    <b>目标地址/坐标：</b>
        <input type="text" id="q" value="请输入您要搜索的位置如:  南宁市朝阳广场" class="address_input" size="42"  />
        <input type="button" value="搜索" onclick="showLocation();"/>
     <div id="map_canvas" style="width: 80%; height: 80%"></div>
  </body>
</html>

楼上的效果实在太粗糙了。
这个只是简单的搜索，要做到楼主想要的效果，必须和数据库相结合，或者外存到KML文件加载。

不知道LZ想要啥效果，单看脚本的话，有一个openlayers，开源的，可以参考一下，再加上geoserver,基本的功能都完全满足了。

以前做过类似的效果，我们把合作商的经纬度给存在数据库中，然后在显示的时候，取一个中心点，算出该中心点多少范围内的经纬度，再查询数据库，把在这个经纬度范围内的店显示出来，至于怎么显示，GOOGLE有直接的API，用起来挺方便的
而且GOOGLE也提供了根据地名直接显示位置的API
不过太久没用了，都忘记光了……

调试易

300分求一地图实例代码

解决方案 »