Javascript 向现有谷歌地图添加地理位置_Javascript_Google Maps

Javascript 向现有谷歌地图添加地理位置

javascript google-maps

Javascript 向现有谷歌地图添加地理位置,javascript,google-maps,Javascript,Google Maps,嗨，我正在根据这个例子制作一张地图，并试图将地理定位添加到地图中，但每次我尝试添加地理定位代码时，它都会破坏其余的代码，所以我希望有人能为我指出正确的方向，让它工作我不熟悉谷歌地图和地理定位我很抱歉，如果以前有人问我这个问题，我就是找不到我需要的答案这是我用于index.html页面的代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

嗨，我正在根据这个例子制作一张地图，并试图将地理定位添加到地图中，但每次我尝试添加地理定位代码时，它都会破坏其余的代码，所以我希望有人能为我指出正确的方向，让它工作

我不熟悉谷歌地图和地理定位

我很抱歉，如果以前有人问我这个问题，我就是找不到我需要的答案

这是我用于index.html页面的代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="test.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script type="text/javascript" src="scripts/map.js"></script>
</head>

 <body onload="initialize()">
 <div class="main-container">
 <img class="logo" src="images/testlogo.png" width="1000" height="150">
 <div class="overall">

 <div class="sidebar1">
 <p>Home</p>
 <p>About Us</p>
 <p>Contact Us</p>
 <p>My Portfolio</p>
 <p>Links</p>
 </div>

 <div class="sidebar2">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content1">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk bacwhich was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content2">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content3">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content4">

 <p class="images1"><img class="otherpics" src="../f5770309.jpg" width="150" height="150"></p>
 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>
 </div>

 <div class="content5">

 <p>Hi My name is Robert Baron Austin and I'm the designer of this website and other sites like Spinfish.co.uk which was my first ever website that I handcoded by myself by using Dreamweaver, Photoshop and Illustrator.</p>

 </div>

 <div class="content6">

 <p><div id="map"></div>

 <form class="form" action="#">
   Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
   Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
   Test: <input type="checkbox" id="testbox" onclick="boxclick(this,'test')" /> &nbsp;&nbsp;
   Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
 </form></p>

<div id="side_bar"></div>

 </div>



 </div>


 <div class="footer">footer</div>

 </div></div></body>
 </html>


无标题文件
家
关于我们
联系我们
我的投资组合
链接
大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站和其他网站的设计师，比如Spinfish.co.uk，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站
大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站以及Spinfish.co.uk等其他网站的设计师，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站
大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站和其他网站的设计师，比如Spinfish.co.uk，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站
大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站和其他网站的设计师，比如Spinfish.co.uk，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站

大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站和其他网站的设计师，比如Spinfish.co.uk，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站
大家好，我的名字是罗伯特·巴龙·奥斯汀，我是这个网站和其他网站的设计师，比如Spinfish.co.uk，这是我第一个使用Dreamweaver、Photoshop和Illustrator手工编写的网站

剧院：
高尔夫球场：
测试：
旅游信息：


页脚

这就是javascript

//<![CDATA[
  // this variable will collect the html which will eventually be placed in the side_bar 
  var side_bar_html = ""; 

  var gmarkers = [];
  var gicons = [];
  var map = null;

var infowindow = new google.maps.InfoWindow(
 { 
  size: new google.maps.Size(150,50)
  });


  var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
   // This marker is 20 pixels wide by 34 pixels tall.
   new google.maps.Size(20, 34),
   // The origin for this image is 0,0.
   new google.maps.Point(0,0),
   // The anchor for this image is at 9,34.
   new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
   // The shadow image is larger in the horizontal dimension
   // while the position and offset are the same as for the main image.
   new google.maps.Size(37, 34),
   new google.maps.Point(0,0),
   new google.maps.Point(9, 34));
   // Shapes define the clickable region of the icon.
   // The type defines an HTML &lt;area&gt; element 'poly' which
   // traces out a polygon as a series of X,Y points. The final
   // coordinate closes the poly by connecting to the first
   // coordinate.
   var iconShape = {
   coord:   [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
  type: 'poly'
  };

    //Custom marker function
        function createMarker(point) {

    //Create the markers
        return new google.maps.Marker({
        position: point,
        map: map,
        draggable: false

    });

 }

  // A function to create the marker and set up the event window
  function createMarker(latlng,name,html,category) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[category],
    shadow: iconShadow,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });
    // === Store the category and name info as a marker properties ===
    marker.mycategory = category;                                 
    marker.myname = name;
    gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
 }

  // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(true);
      }
    }
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;
  }

  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(false);
      }
    }
    // == clear the checkbox ==
    document.getElementById(category+"box").checked = false;
    // == close the info window, in case its open on a marker that we just hid
    infowindow.close();
  }

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
    // == rebuild the side bar
    makeSidebar();
  }

  function myclick(i) {
    google.maps.event.trigger(gmarkers[i],"click");
  }


  // == rebuilds the sidebar to match the markers currently displayed ==
  function makeSidebar() {
    var html = "";
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }

 function initialize() {
  var myOptions = {
   zoom: 10,
   center: new google.maps.LatLng(53.8363,-3.0377),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });



  // Read the data
  downloadUrl("categories.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var address = markers[i].getAttribute("address");
      var name = markers[i].getAttribute("name");
      var html = "<b>"+name+"<\/b><p>"+address;
      var category = markers[i].getAttribute("category");
      // create the marker
      var marker = createMarker(point,name,html,category);
    }

    // == show or hide the categories initially ==
    hide("theatre");
    hide("golf");
    hide("info");
    hide("test");
    // == create the initial sidebar ==
    makeSidebar();
  });
 }

 // This Javascript is based on code provided by the
 // Community Church Javascript Team
 // http://www.bisphamchurch.org.uk/   
 // http://econym.org.uk/gmap/
 // from the v2 tutorial page at:
 // http://econym.org.uk/gmap/example_categories.htm
 //]]>

//

首先，在包含谷歌地图API时，必须使用

sensor=true

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

你能更具体地说明你想要实现的目标吗？您好，谢谢您的回复，我正在尝试在我的网站版本中将地理位置添加到上面链接的地图中，因此当用户访问我的网站时，他们会看到他们的位置，然后可以从感兴趣的地点列表中进行选择。好的，谢谢，我把代码放在正确的地方了吗？我想这是我的问题的一部分。我仍然有一个问题，我就是不能让它运行