google map api v3

最新推荐文章于 2018-04-27 18:43:10 发布

清风远行

最新推荐文章于 2018-04-27 18:43:10 发布

阅读量1.1k

点赞数

分类专栏： c# 开发

本文链接：https://blog.csdn.net/dingxingmei/article/details/8507952

版权

c# 开发专栏收录该内容

235 篇文章 0 订阅

订阅专栏

两部分代码：body 和 head

特别注意： height：的值如果设置为 100% ，，地图就不会显示。

<body οnlοad="initialize()" >
    <form id="form1" runat="server">
   Find Place:<input type="text" id="address"/>
    <input type="button" value="Go" οnclick="geocode()" />
    <input type="button" value="Add Marker at Center" οnclick="addMarkerAtCenter()"/>

<div id="map">
    <div id="map_canvas" style="width:100%; height:400px"></div>
    <div id="crosshair"></div>
</div>
<table>
    <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
    <tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
    <tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr>
</table>
    </form>
</body>

div#crosshair {
    position: absolute;
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    background: url(crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;

function initialize() {
    var latlng = new google.maps.LatLng(39.91,116.404);
    var myOptions = {
      zoom:12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();

var beijing=new google.maps.Marker({ position:latlng,map:map,title:"beijing" })

      var yongzhou=new google.maps.Marker({
position: new google.maps.LatLng(26.41155054662258,
111.610107421875),map:map, title:"yongzhu" })


    var changde=new google.maps.Marker({
position: new google.maps.LatLng(29.017748018496046,
111.68701171875),map:map, title:"changde",icon:'image/up.png' })

     var heyang=new google.maps.Marker({
position: new google.maps.LatLng(28.22697003891834,
112.91748046875), map:map, title:"heyang"})

    setupEvents();
    centerChanged();
}

function setupEvents() {
reverseGeocodedLast = new Date();
centerChangedLast = new Date();

    setInterval(function() {
      if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
        if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
          reverseGeocode();
      }
    }, 1000);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      document.getElementById("zoom_level").innerHTML = map.getZoom();
    });

google.maps.event.addListener(map, 'center_changed', centerChanged);

    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });

}

function getCenterLatLngText() {
return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
}

function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    document.getElementById('latlng').innerHTML = latlng;
    document.getElementById('formatedAddress').innerHTML = '';
    currentReverseGeocodeResponse = null;
}

function reverseGeocode() {
reverseGeocodedLast = new Date();
geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
}

function geocode() {
   var address = document.getElementById("address").value;
    geocoder.geocode({
     'address': address,
      'partialmatch': true}, geocodeResult);
}

function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
     map.fitBounds(results[0].geometry.viewport);
   } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
}

function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
       position: map.getCenter(),
       map: map     });

</script>
</head>

清风远行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google map api v3

两部分代码：body 和 head 特别注意： height：的值如果设置为 100% ，，地图就不会显示。 Find Place: Lat/Lng: Address: Zoom Level2
复制链接

扫一扫

专栏目录